Advertisement
Guest User

Rainbow text

a guest
Feb 8th, 2022
975
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.44 KB | None | 0 0
  1. <style>
  2. @-webkit-keyframes rainbow {
  3. 0% {color: #ff0000;}
  4. 10% {color: #ff8000;}
  5. 20% {color: #ffff00;}
  6. 30% {color: #80ff00;}
  7. 40% {color: #00ff00;}
  8. 50% {color: #00ff80;}
  9. 60% {color: #00ffff;}
  10. 70% {color: #0080ff;}
  11. 80% {color: #0000ff;}
  12. 90% {color: #8000ff;}
  13. 100% {color: #ff0080;}
  14. }
  15. @-ms-keyframes rainbow {
  16. 0% {color: #ff0000;}
  17. 10% {color: #ff8000;}
  18. 20% {color: #ffff00;}
  19. 30% {color: #80ff00;}
  20. 40% {color: #00ff00;}
  21. 50% {color: #00ff80;}
  22. 60% {color: #00ffff;}
  23. 70% {color: #0080ff;}
  24. 80% {color: #0000ff;}
  25. 90% {color: #8000ff;}
  26. 100% {color: #ff0080;}
  27. }
  28. @-o-keyframes rainbow {
  29. 0% {color: #ff0000;}
  30. 10% {color: #ff8000;}
  31. 20% {color: #ffff00;}
  32. 30% {color: #80ff00;}
  33. 40% {color: #00ff00;}
  34. 50% {color: #00ff80;}
  35. 60% {color: #00ffff;}
  36. 70% {color: #0080ff;}
  37. 80% {color: #0000ff;}
  38. 90% {color: #8000ff;}
  39. 100% {color: #ff0080;}
  40. }
  41. @keyframes rainbow {
  42. 0% {color: #ff0000;}
  43. 10% {color: #ff8000;}
  44. 20% {color: #ffff00;}
  45. 30% {color: #80ff00;}
  46. 40% {color: #00ff00;}
  47. 50% {color: #00ff80;}
  48. 60% {color: #00ffff;}
  49. 70% {color: #0080ff;}
  50. 80% {color: #0000ff;}
  51. 90% {color: #8000ff;}
  52. 100% {color: #ff0080;}
  53. }
  54.  
  55. /*PASTEL RAINBOW*/
  56. @-webkit-keyframes pastelrainbow {
  57. 0% {color: #ff9494; }
  58. 16% {color: #ffbb94; }
  59. 32% {color: #ffe194; }
  60. 48% {color: #b1f2ba; }
  61. 64% {color: #b8f5ff; }
  62. 80% {color: #d8b8ff; }
  63. 100% {color: #ffb8ee; }
  64. }
  65. @-ms-keyframes pastelrainbow {
  66. 0% {color: #ff9494; }
  67. 16% {color: #ffbb94; }
  68. 32% {color: #ffe194; }
  69. 48% {color: #b1f2ba; }
  70. 64% {color: #b8f5ff; }
  71. 80% {color: #d8b8ff; }
  72. 100% {color: #ffb8ee; }
  73. }
  74. @-o-keyframes pastelrainbow {
  75. 0% {color: #ff9494; }
  76. 16% {color: #ffbb94; }
  77. 32% {color: #ffe194; }
  78. 48% {color: #b1f2ba; }
  79. 64% {color: #b8f5ff; }
  80. 80% {color: #d8b8ff; }
  81. 100% {color: #ffb8ee; }
  82. }
  83. @keyframes pastelrainbow {
  84. 0% {color: #ff9494; }
  85. 16% {color: #ffbb94; }
  86. 32% {color: #ffe194; }
  87. 48% {color: #b1f2ba; }
  88. 64% {color: #b8f5ff; }
  89. 80% {color: #d8b8ff; }
  90. 100% {color: #ffb8ee; }
  91. }
  92. #different {
  93. animation:pastelrainbow 2s infinite;
  94. font-weight: bold;
  95. font-size: 2em;
  96. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
  97. }
  98. #head {
  99. animation: rainbow 2s infinite;
  100. font-weight: bold;
  101. font-size: 2em;
  102. text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0 0;
  103. }
  104. </style>
  105. <div id="different">DIFFERENT IN THE HEAD</div>
  106. <p></p>
  107. <div id="head">DIFFERENT IN THE HEAD</div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement