纯CSS3霓虹灯文字闪烁动画特效

纯CSS3霓虹灯文字闪烁动画特效

这是一款纯css3绘制LED文字闪烁动画、霓虹灯文字动画特效。支持中文、英文字母效果。

使用方法
直接在页面引入CSS3样式即可

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<style>
@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,700");
body {
  margin: 0;
  display: flex;
  height: 100vh;
  background: #240041;
 font-family: Montserrat, sans-serif;
}
 
h1 {
  margin: auto;
  font-size: 20vw;
  text-align: center;
  text-transform: uppercase;
  color: #900048;
 white-space: nowrap;
  letter-spacing: -.15em;
}
 
span:nth-child(1) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(2) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
span:nth-child(3) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(4) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
span:nth-child(5) {
  animation: blink 1s steps(1, start) 0.33s infinite;
}
 
span:nth-child(6) {
  animation: blink 1s steps(1, start) 0.66s infinite;
}
 
@keyframes blink {
  33% {
    color: #FF4057;
 }
  66% {
    color: #FF8260;
 }
}
</style>

Html结构
在页面引入以下html代码

1
2
3
4
5
6
7
<h1>
   <span>r</span>
   <span>u</span>
   <span>z</span>
   <span>w</span>
 
</h1>

文件信息:

    0

    发表评论