CSS3超酷模糊发光文字动画特效

CSS3超酷模糊发光文字动画特效

这是一款CSS3超酷模糊发光文字动画特效。该特效通过简单的CSS代码来实现文字的模糊和发光动画效果。

使用方法
HTML结构
页面布局的HTML结构如下。

1
2
3
4
5
6
7
8
9
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="text-effect">
                <span>Best jQuery</span>
            </div>
        </div>
    </div>
</div>

CSS样式
然后添加下面的CSS样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
.text-effect{
    color: #fff;
   font-family: 'Frijole', cursive;
    font-size: 80px;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 8px;
    margin: 30px auto 0;
    animation: 4s animate infinite linear;
}
@keyframes animate{
    0%{ text-shadow: 0 0 0 white; }
    40%{
        color: rgba(255,255,255,0);
        text-shadow: 0 0 30px white;
    }
    70%{
        color: rgba(255,255,255,0.4);
        text-shadow: 0 0 10px white;
    }
    90%{
        color: rgba(255,255,255,0.6);
        text-shadow: 0 0 30px white;
    }
    100%{ text-shadow: 0 0 40px rgba(255,255,255,0); }
}
@media only screen and (max-width: 990px){
    .text-effect{ font-size: 80px; }
}
@media only screen and (max-width: 767px){
    .text-effect{ font-size: 40px; }
}
@media only screen and (max-width: 479px){
    .text-effect{ font-size: 30px; }
}
@media only screen and (max-width: 359px){
    .text-effect{ font-size: 25px; }
}
当前内容只有登录了才能查看,如果您已经注册,请登录
1

发表评论