已解决430363个问题，去搜搜看，总会有你想问的

css3 怎么实现字体逐个发光

关注

首页猿问 css3 怎么实现字体逐个发光

css3 怎么实现字体逐个发光

CSS3

慕仙森 2019-03-20 14:13:30

css3 怎么实现字体逐个发光

查看完整描述

2 回答

偶然的你

TA贡献1841条经验获得超3个赞

<style>

@media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) {
.masked1{
background-image: -webkit-linear-gradient(left, #0ee5ff, #f4ab20 50%, #0ee5ff 50%, #f4ab20 100%, #0ee5ff);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-background-size: 200% 100%;
-webkit-animation: masked-animation 5s infinite linear;
}
}
@-webkit-keyframes masked-animation {
0% { background-position: 0 0;}
100% { background-position: -100% 0;}
}
</style>
<div class="masked1" id="sx8">2.684.156</div>

反对回复 2019-03-22

慕妹3242003

TA贡献1824条经验获得超6个赞

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS3发光字</title>

<style>

*{ padding:0;margin:0;font-size:14px; }

body{ background: #f3f5f5; }

.d{ width:100%;text-align:center;margin:20px auto; }

.a , .n{ text-decoration: none;font-size:6em;font-family:"微软雅黑"; }

.a{ color:blue; }

.a:link{ color:blue; }

.n{ color:#FFF;text-shadow: 0 0 10px #000,0 0 25px #000; }

.def , .h:hover{ animation: run 2.4s infinite;-webkit-animation: run 2.4s infinite;-moz-animation: run 2.4s infinite;

-ms-animation: run 2.4s infinite;-o-animation: run 2.4s infinite; }

@-webkit-keyframes run{

0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; }

50%{ text-shadow:0 0 10px blue,0 0 40px blue; }

}

@-moz-keyframes run{

0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; }

50%{ text-shadow:0 0 10px blue,0 0 40px blue; }

}

@-o-keyframes run{

0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; }

50%{ text-shadow:0 0 10px blue,0 0 40px blue; }

}

@-ms-keyframes run{

0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; }

50%{ text-shadow:0 0 10px blue,0 0 40px blue; }

}

@keyframes run{

0%,100%{ color:#fff;text-shadow:0 0 10px blue,0 0 10px blue; }

50%{ text-shadow:0 0 10px blue,0 0 40px blue; }

}

</style>

</head>

<body>

<hr>

字体不带动效：

<div class="d">

<a href="javascript:void(0);" class="n">如何使用CSS3制作特效发光字</a>

</div>

<hr>

字体自带动效：

<div class="d">

<a href="javascript:void(0);" class="a def">不记得你的名字，但记得你的死期。</a>

</div>

<hr>

字体悬浮动效：

<div class="d">

<a href="javascript:void(0);" class="a h">剑之所至，心之所往。</a>

</div>

<hr>

</body>

</html>

反对回复 2019-03-22

2 回答
0 关注
1057 浏览

关注

添加回答

举报

0/150

提交

取消

意见反馈帮助中心 APP下载