HTML荧光文字动态效果,CSS3荧光灯文字闪烁动画特效 |
您所在的位置:网站首页 › 文字闪动特效 › HTML荧光文字动态效果,CSS3荧光灯文字闪烁动画特效 |
这是一款纯CSS3荧光灯文字闪烁动画特效。该特效在HTML结构中将文字拆分为单个span元素,然后通过CSS3代码来制作荧光灯和闪烁特效。 使用方法 HTML结构 J Q u e r y CSS样式 .demo{background: #2c2c54; } .text-effect{ color: #fff; font-family: 'Monoton', cursive; font-size: 100px; font-weight: 700; text-transform: uppercase; text-align: center; margin: 0 auto; display: block; position: relative; } .text-effect span{ animation: animate linear 2000ms infinite; } .text-effect span:nth-child(1n){ animation-delay: 0s; } .text-effect span:nth-child(2n){ animation-delay: 100ms; } .text-effect span:nth-child(3n){ animation-delay: 200ms; } .text-effect span:nth-child(4n){ animation-delay: 300ms; } .text-effect span:nth-child(5n){ animation-delay: 400ms; } .text-effect span:nth-child(6n){ animation-delay: 500ms; } .text-effect span:nth-child(7n){ animation-delay: 600ms; } .text-effect span:nth-child(8n){ animation-delay: 700ms; } .text-effect span:nth-child(9n){ animation-delay: 800ms; } .text-effect span:nth-child(10n){ animation-delay: 900ms; } @keyframes animate{ 0%{ opacity: 0.3; } 100%{ opacity:1; text-shadow: 0 0 80px Red,0 0 30px orange,0 0 6px DarkRed; } } @media only screen and (max-width: 990px){ .text-effect{ font-size: 65px; } } @media only screen and (max-width: 767px){ .text-effect{ font-size: 50px; } } @media only screen and (max-width: 479px){ .text-effect{ font-size: 36px; } } @media only screen and (max-width: 359px){ .text-effect{ font-size: 27px; } } |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |