主要的代码就是text-shadow多写几层
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #8500a6,
0 0 70px #8500a6,
0 0 80px #8500a6,
0 0 100px #8500a6,
0 0 150px #8500a6;
下面给个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style lang="css">
body {
background-color: #000;
}
.text {
font-size: 30px;
color: #fff;
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #8500a6,
0 0 70px #8500a6,
0 0 80px #8500a6,
0 0 100px #8500a6,
0 0 150px #8500a6;
}
.text2 {
font-size: 30px;
color: #fff;
transition: all 0.4s ease;
}
.text2:hover {
/* name duration timing-functio delay iteration-count(动画次数) direction方向*/
animation: Glow 1.5s ease infinite alternate;
}
@keyframes Glow {
from {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #8500a6,
0 0 70px #8500a6,
0 0 80px #8500a6,
0 0 100px #8500a6,
0 0 150px #8500a6;
}
to {
text-shadow: 0 0 10px #fff,
0 0 20px #fff,
0 0 30px #fff,
0 0 40px #00a67c,
0 0 70px #00a67c,
0 0 80px #00a67c,
0 0 100px #00a67c,
0 0 150px #00a67c;
}
}
</style>
</head>
<body>
<p class="text">文字文字发光</p>
<p class="text2">文字文字发光</p>
</body>
</html>