文本/链接

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. }
服务范围 1、专业提供WordPress主题、插件汉化、优化、PHP环境配置等服务请详询在线客服
2、本站承接 WordPress、DedeCMS、ThinkPHP 等系统建站、仿站、开发、定制等服务
3、英文模板(主题)安装费用为120元/次,汉化主题首次免费安装(二次安装30元/次)
售后时间 周一至周五(法定节假日除外) 10:00-22:00
免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: 2107117185@qq.com),我们会及时删除,给您带来的不便,我们深表歉意!
免费下载
(1)

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

也想出现在这里?联系我们
创客主机

热评文章

发表评论

精彩推荐

Tabula - 艺术音乐外语培训学校网站WordPress模板

Envato Affiliates

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

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