dracslaura

rainbow links

Oct 12th, 2021 (edited)
1,207
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 1.51 KB | None | 0 0
  1. <style>
  2. a.rainbow:link { text-decoration: none; }
  3.  
  4. a.rainbow {
  5. font-size:2em;
  6. }
  7.  
  8. a.rainbow:hover {
  9. -webkit-animation:rainbow 1s infinite;
  10. -ms-animation:rainbow 1s infinite;
  11. -o-animation:rainbow 1s infinite;
  12. animation:rainbow 1s infinite;
  13. }
  14.  
  15. /*you can change the colors but i just made them rainbow, just make sure it also matches the keyframes one below*/
  16. @-webkit-keyframes rainbow {
  17. 0% {color: #ff0000;}
  18. 10% {color: #ff8000;}
  19. 20% {color: #ffff00;}
  20. 30% {color: #80ff00;}
  21. 40% {color: #00ff00;}
  22. 50% {color: #00ff80;}
  23. 60% {color: #00ffff;}
  24. 70% {color: #0080ff;}
  25. 80% {color: #0000ff;}
  26. 90% {color: #8000ff;}
  27. 100% {color: #ff0080;}
  28. }
  29. @-ms-keyframes rainbow {
  30. 0% {color: #ff0000;}
  31. 10% {color: #ff8000;}
  32. 20% {color: #ffff00;}
  33. 30% {color: #80ff00;}
  34. 40% {color: #00ff00;}
  35. 50% {color: #00ff80;}
  36. 60% {color: #00ffff;}
  37. 70% {color: #0080ff;}
  38. 80% {color: #0000ff;}
  39. 90% {color: #8000ff;}
  40. 100% {color: #ff0080;}
  41. }
  42. @-o-keyframes rainbow {
  43. 0% {color: #ff0000;}
  44. 10% {color: #ff8000;}
  45. 20% {color: #ffff00;}
  46. 30% {color: #80ff00;}
  47. 40% {color: #00ff00;}
  48. 50% {color: #00ff80;}
  49. 60% {color: #00ffff;}
  50. 70% {color: #0080ff;}
  51. 80% {color: #0000ff;}
  52. 90% {color: #8000ff;}
  53. 100% {color: #ff0080;}
  54. }
  55. @keyframes rainbow {
  56. 0% {color: #ff0000;}
  57. 10% {color: #ff8000;}
  58. 20% {color: #ffff00;}
  59. 30% {color: #80ff00;}
  60. 40% {color: #00ff00;}
  61. 50% {color: #00ff80;}
  62. 60% {color: #00ffff;}
  63. 70% {color: #0080ff;}
  64. 80% {color: #0000ff;}
  65. 90% {color: #8000ff;}
  66. 100% {color: #ff0080;}
  67. }
  68. </style>
  69. <a class="rainbow" href="#home">Rainbow</a>
Add Comment
Please, Sign In to add comment