文本/链接

CSS3荧光灯文字闪烁动画特效

面包多

CSS3荧光灯文字闪烁动画特效-创客云
这是一款纯 CSS3 荧光灯文字闪烁动画特效。该特效在 HTML 结构中将文字拆分为单个 span 元素,然后通过 CSS3 代码来制作荧光灯和闪烁特效。

HTML 结构

  1. <div class="text-effect">
  2.   <span>J</span>
  3.   <span>Q</span>
  4.   <span>u</span>
  5.   <span>e</span>
  6.   <span>r</span>
  7.   <span>y</span>
  8. </div>
也想出现在这里?联系我们
创客主机

CSS 样式

  1. .demo{background: #2c2c54; }
  2. .text-effect{
  3.     color: #fff;
  4.     font-family: 'Monoton', cursive;
  5.     font-size: 100px;
  6.     font-weight: 700;
  7.     text-transform: uppercase;
  8.     text-align: center;
  9.     margin: 0 auto;
  10.     display: block;
  11.     position: relative;
  12. }
  13. .text-effect span{ animation: animate linear 2000ms infinite; }
  14. .text-effect span:nth-child(1n){ animation-delay: 0s; }
  15. .text-effect span:nth-child(2n){ animation-delay: 100ms; }
  16. .text-effect span:nth-child(3n){ animation-delay: 200ms; }
  17. .text-effect span:nth-child(4n){ animation-delay: 300ms; }
  18. .text-effect span:nth-child(5n){ animation-delay: 400ms; }
  19. .text-effect span:nth-child(6n){ animation-delay: 500ms; }
  20. .text-effect span:nth-child(7n){ animation-delay: 600ms; }
  21. .text-effect span:nth-child(8n){ animation-delay: 700ms; }
  22. .text-effect span:nth-child(9n){ animation-delay: 800ms; }
  23. .text-effect span:nth-child(10n){ animation-delay: 900ms; }
  24. @keyframes animate{
  25.     0%{ opacity: 0.3; }
  26.     100%{
  27.        opacity:1;
  28.        text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed;
  29.     }
  30. }
  31. @media only screen and (max-width: 990px){
  32.     .text-effect{ font-size: 65px; }
  33. }
  34. @media only screen and (max-width: 767px){
  35.     .text-effect{ font-size: 50px; }
  36. }
  37. @media only screen and (max-width: 479px){
  38.     .text-effect{ font-size: 36px; }
  39. }
  40. @media only screen and (max-width: 359px){
  41.     .text-effect{ font-size: 27px; }
  42. }
(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!