CSS霓虹灯特效

最新推荐文章于 2023-03-21 13:25:10 发布

HarryHY

最新推荐文章于 2023-03-21 13:25:10 发布

阅读量472

点赞数

分类专栏： # CSS

本文链接：https://blog.csdn.net/HarryHY/article/details/99693493

版权

CSS 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

HTML部分

<div class="text-effect">
        <span>Harry</span>
        <span>is</span>
        <span>so</span>       
        <span>cool</span>
</div>

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; }
}