CSS3 花屏文字

网友投稿 600 2022-05-30

原理图

想要看原理图的话,仅需要加上如下样式

.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

最终效果图

代码如下:

Blur Text

天下人做天下事

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

CSS3 花屏文字

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小时内删除侵权内容。

上一篇:VIM — vim-go
下一篇:Unity Resources的几个方法
相关文章