CSS3 花屏文字
原理圖
想要看原理圖的話，僅需要加上如下樣式
.scanline { background-color: red; } .blurtext:before { background-color: green; } .blurtext:after { background-color: blue; }
1
2
3
4
5
6
7
8
9
可以看出
掃碼線基本都在文字下方，然后瞬間彈跳兩次，最終又回到文字下方
偏移的藍色矩形也是從上向下彈跳
背后的綠色矩形只有在藍色矩形回收的時候，才會偶爾短暫顯示
偏移文字不加背景情況的透視圖
該圖是把 “偏移文字” 的圖層背景的透明度置為 0.5，即50%透明度
可以看出底部遮罩層露了出來
紅色陰影偶爾才顯示，是因為偏移量比較小，又是右側（在同層級的 文字下層）所以僅會顯示一丟丟
.blurtext:after { background-color: rgba(255,255,255,0.5); }
1
2
3
最終效果圖
代碼如下：
天下人做天下事
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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
CSS
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。
相關文章
