css 实现链接荧光特效

  • css 实现链接荧光特效已关闭评论
  • 142 views
  • A+
所属分类:美化特效
  1. a{
  2. ??text-decoration:none;
  3. ??-webkit-transition:?all?0.5s;
  4. ??-moz-transition:?all?0.5s;
  5. ??transition:?all?0.5s;
  6. }
  7. a:hover{
  8. ??-webkit-animation:?neon4?1.5s?ease-in-out?infinite?alternate;
  9. ??-moz-animation:?neon4?1.5s?ease-in-out?infinite?alternate;
  10. ??animation:?neon4?1.5s?ease-in-out?infinite?alternate;
  11. ??text-decoration:?none;
  12. }
  13. /*glow?for?webkit*/
  14. @-webkit-keyframes?neon4?{
  15. ??from?{
  16. ????text-shadow:?0?0?10px?#fff,
  17. ???????????????0?0?20px??#fff,
  18. ???????????????0?0?30px??#fff,
  19. ???????????????0?0?40px??#B6FF00,
  20. ???????????????0?0?70px??#B6FF00,
  21. ???????????????0?0?80px??#B6FF00,
  22. ???????????????0?0?100px?#B6FF00,
  23. ???????????????0?0?150px?#B6FF00;
  24. ??}
  25. ??to?{
  26. ????text-shadow:?0?0?5px?#fff,
  27. ???????????????0?0?10px?#fff,
  28. ???????????????0?0?15px?#fff,
  29. ???????????????0?0?20px?#B6FF00,
  30. ???????????????0?0?35px?#B6FF00,
  31. ???????????????0?0?40px?#B6FF00,
  32. ???????????????0?0?50px?#B6FF00,
  33. ???????????????0?0?75px?#B6FF00;
  34. ??}
  35. }
  36. /*glow?for?mozilla*/
  37. @-moz-keyframes?neon4?{
  38. ??from?{
  39. ????text-shadow:?0?0?10px?#fff,
  40. ???????????????0?0?20px??#fff,
  41. ???????????????0?0?30px??#fff,
  42. ???????????????0?0?40px??#B6FF00,
  43. ???????????????0?0?70px??#B6FF00,
  44. ???????????????0?0?80px??#B6FF00,
  45. ???????????????0?0?100px?#B6FF00,
  46. ???????????????0?0?150px?#B6FF00;
  47. ??}
  48. ??to?{
  49. ????text-shadow:?0?0?5px?#fff,
  50. ???????????????0?0?10px?#fff,
  51. ???????????????0?0?15px?#fff,
  52. ???????????????0?0?20px?#B6FF00,
  53. ???????????????0?0?35px?#B6FF00,
  54. ???????????????0?0?40px?#B6FF00,
  55. ???????????????0?0?50px?#B6FF00,
  56. ???????????????0?0?75px?#B6FF00;
  57. ??}
  58. }
  59. /*glow*/
  60. @keyframes?neon4?{
  61. ??from?{
  62. ????text-shadow:?0?0?10px?#fff,
  63. ???????????????0?0?20px??#fff,
  64. ???????????????0?0?30px??#fff,
  65. ???????????????0?0?40px??#B6FF00,
  66. ???????????????0?0?70px??#B6FF00,
  67. ???????????????0?0?80px??#B6FF00,
  68. ???????????????0?0?100px?#B6FF00,
  69. ???????????????0?0?150px?#B6FF00;
  70. ??}
  71. ??to?{
  72. ????text-shadow:?0?0?5px?#fff,
  73. ???????????????0?0?10px?#fff,
  74. ???????????????0?0?15px?#fff,
  75. ???????????????0?0?20px?#B6FF00,
  76. ???????????????0?0?35px?#B6FF00,
  77. ???????????????0?0?40px?#B6FF00,
  78. ???????????????0?0?50px?#B6FF00,
  79. ???????????????0?0?75px?#B6FF00;
  80. ??}
  81. }

历史上的今天:

唯心寒辞