文本阴影属性不工作
我正在使用谷歌铬这个
@import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
body{
font-family: 'Smooch', cursive;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
h1{
margin: 0;
padding: 0;
color: #111;
font-size: 16em;
}
h1 span{
display: table-cell;
margin: 0;
padding: 0;
animation: animate 2s linear infinite;
}
h1 span:nth-child(1){
animation-delay: 0s;
}
h1 span:nth-child(2){
animation-delay: 0.25s;
}
h1 span:nth-child(3){
animation-delay: 0.5s;
}
h1 span:nth-child(4){
animation-delay: 0.75s;
}
h1 span:nth-child(5){
animation-delay: 1s;
}
h1 span:nth-child(6){
animation-delay: 1.25s;
}
h1 span:nth-child(7){
animation-delay: 1.5s;
}
h1 span:nth-child(8){
animation-delay: 11.75s;
}
@keyframes animate{
0%,100%{
color: #fff;
filter: blur(2px);
text-shadow: 0 0 10px, #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff,;
}
5%,95%{
color: #111;
filter: blur(0px);
text-shadow: 0 0 10px none,
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing |Text Animation</title>
<link rel="stylesheet" href="glowingText.css">
</head>
<body>
<h1>
<span>P</span>
<span>A</span>
<span>R</span>
<span>T</span>
<span>H</span>
</h1>
</body>
</html>您添加了一个额外的逗号
这是固定代码：
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
请在文本shadow属性的第一行和最后一行加上一个逗号。
text-shadow: 0 0 10px #00b3ff,
0 0 20px #00b3ff,
0 0 40px #00b3ff,
0 0 80px #00b3ff,
0 0 120px #00b3ff,
0 0 200px #00b3ff,
0 0 300px #00b3ff,
0 0 400px #00b3ff;
只要去掉多余的逗号就可以了。这里有一把小提琴：https://jsfiddle.net/pfec2vxk/