页面模拟霓虹灯效果

rundreamer · 发表于 2022-4-12 12:14

html+css实现页面模拟霓虹灯效果

[HTML] 纯文本查看 复制代码

01

02

03

04

05

06

07

08

09

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

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus&#174;">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <title>霓虹灯</title>
<style type="text/css">
body{background-color: #00688B;}
.text{
    font-size: 64px;
    font-weight: normal;
    text-transform: uppercase;/*大写 lowercase小写；capitalize单词首字母大写*/
    fill:none;
    stroke: #B0E0E6;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
.text-1{
    stroke: #FFEC8B;
    animation-delay:-1.5s;
    text-shadow:5px 5px 5px #FFEC8B;
}
.text-2{
    stroke:#AEEEEE;
    animation-delay:-3s;
    text-shadow:5px 5px 5px #7FFFD4;
}
.text-3{
    stroke:#EEE0E5;
    animation-delay:-4.5s;
    text-shadow:5px 5px 5px #7FFFD4;
}
.text-4{
    stroke:#FFC1C1;
    animation-delay:-6s;
    text-shadow:5px 5px 5px #7FFFD4;
}
@keyframes stroke {
    to {
        stroke-dashoffset: -400;
    }
}
</style>
</head>
 
<body>
    <svg width="100%" height="100" style="margin:100px auto">
        <text text-anchor="middle" x="50%" y="50%" class="text text-1" >
            Happy birthday to you&#10084;
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-2" >
            Happy birthday to you&#10084;
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-3" >
            Happy birthday to you&#10084;
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-4" >
            Happy birthday to you&#10084;
        </text>
    </svg>
</body>
 
</html>

Wisdom_xiaogui · 发表于 2022-4-12 14:17

落红护花发表于 2022-4-12 13:57
问一下为什么要写4个text

@rundreamer

霓虹灯，利用时间差，营造动态效果

semiuel · 发表于 2022-4-12 12:38

怎么改字号大小？

nihao3312 · 发表于 2022-4-12 12:56

楼主辛苦了

感受老司机的爱 · 发表于 2022-4-12 13:07

这个真的是厉害，羡慕羡慕

落红护花 · 发表于 2022-4-12 13:13

感谢感谢，好东西

rundreamer · 发表于 2022-4-12 13:47

semiuel 发表于 2022-4-12 12:38
怎么改字号大小？

font-size

落红护花 · 发表于 2022-4-12 13:57

问一下为什么要写4个text

@rundreamer

8at08 · 发表于 2022-4-12 14:07

又学一招，感谢分享~

SEYUNIFAN0 · 发表于 2022-4-12 14:30

学会了感谢

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] 页面模拟霓虹灯效果

免费评分