<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆阵</title>
<style type="text/css">
body{
background-color: #AFE;
margin: 260px;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
animation: load-effect .9s infinite linear;
}
@keyframes load-effect {
0%,
100% {
box-shadow: 0 -3em 0 .2em#FFF, 2em -2em 0 0 #FFF, 3em 0 0 -.5em #FFF, 2em 2em 0 -.5em #FFF, 0 3em 0 -.5em #000, -2em 2em 0 -.5em #000, -3em 0 0 -.5em #000, -2em -2em 0 0 #000;
}
12.5% {
box-shadow: 0 -3em 0 0 #FCC, 2em -2em 0 .2em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
}
25% {
box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 0 #FFB7DD, 3em 0 0 .2em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
}
37.5% {
box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 0 #FF88C2, 2em 2em 0 .2em #F4A, 0 3em 0 0 #F08, -2em 2em 0 -.5em #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
}
50% {
box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 0 #F4A, 0 3em 0 .2em #F08, -2em 2em 0 0 #C10066, -3em 0 0 -.5em #A20055, -2em -2em 0 -.5em #8C0044;
}
62.5% {
box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 0 #F08, -2em 2em 0 .2em #C10066, -3em 0 0 0 #A20055, -2em -2em 0 -.5em #8C0044;
}
75% {
box-shadow: 0 -3em 0 -.5em #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 0 #C10066, -3em 0 0 .2em #A20055, -2em -2em 0 0 #8C0044;
}
87.5% {
box-shadow: 0 -3em 0 0 #FCC, 2em -2em 0 -.5em #FFB7DD, 3em 0 0 -.5em #FF88C2, 2em 2em 0 -.5em #F4A, 0 3em 0 -.5em #F08, -2em 2em 0 0 #C10066, -3em 0 0 0 #A20055, -2em -2em 0 .2em #8C0044;
}
}
</style>
</head>
<body>
<div class="load"></div>
</body>
</html> 交作业!
交作业时,手抖,给点错了,结果给2楼点了一个反对,我确实是手抖点错了,没有恶意。如果能够撤销,请指点如何撤销。真的非常抱歉。。。{:5_96:} 顶 本帖最后由 601900987 于 2018-7-18 22:51 编辑
@keyframes load-effect {
0%, 这里的逗号难以理解啊,{:10_266:} 为什么0%没有设置
100% {
本帖最后由 你在意在便在 于 2019-11-7 22:27 编辑
坚持!~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆阵</title>
<style type="text/css">
body{
background: #000;
margin: 200px;
}
.load{
font-size: 33px;
width: 1em;
height: 1em;
border-radius: 50%;
/* background: red; */
text-indent: -8888em;
animation: flash .9s infinite linear;
}
@keyframes flash{
0% ,
100% {
box-shadow:
0em -3em 0.2em rgba(231,76,60,1),
2em -2em 0 0em rgba(230,126,34,1),
3em0em 0 -.5em rgba(254,202,87,1),
2em2em 0 -.5em rgba(76,209,55,1),
0em3em 0 -.5em rgba(0,168,255,1),
-2em2em 0 -.5em rgba(140,122,230,1),
-3em0em 0 -.5em rgba(255,159,243,1),
-2em -2em 0 0em rgba(72,84,96,1)
}
12.5% {
box-shadow:
0em -3em 0 0em rgba(231,76,60,1),
2em -2em 0.2em rgba(230,126,34,1),
3em 0em0 0em rgba(254,202,87,1),
2em2em 0 -.5em rgba(76,209,55,1),
0em3em 0 -.5em rgba(0,168,255,1),
-2em2em 0 -.5em rgba(140,122,230,1),
-3em0em 0 -.5em rgba(255,159,243,1),
-2em -2em 0 -.5em rgba(72,84,96,1)
}
25% {
box-shadow:
0em -3em 0 -.5em rgba(231,76,60,1),
2em -2em 0 0em rgba(230,126,34,1),
3em0em 0.2em rgba(254,202,87,1),
2em2em 0 0em rgba(76,209,55,1),
0em3em 0 -.5em rgba(0,168,255,1),
-2em2em 0 -.5em rgba(140,122,230,1),
-3em0em 0 -.5em rgba(255,159,243,1),
-2em -2em 0 -.5em rgba(72,84,96,1)
}
37.5% {
box-shadow:
0em -3em 0 -.5em rgba(231,76,60,1),
2em -2em 0 -.5em rgba(230,126,34,1),
3em 0em 0 0em rgba(254,202,87,1),
2em2em 0.2em rgba(76,209,55,1),
0em3em 0 0em rgba(0,168,255,1),
-2em2em 0 -.5em rgba(140,122,230,1),
-3em0em 0 -.5em rgba(255,159,243,1),
-2em -2em 0 -.5em rgba(72,84,96,1)
}
50% {
box-shadow:
0em -3em 0 -.5em rgba(231,76,60,1),
2em -2em 0 -.5em rgba(230,126,34,1),
3em 0em 0-.5em rgba(254,202,87,1),
2em2em 0 0em rgba(76,209,55,1),
0em3em 0.2em rgba(0,168,255,1),
-2em2em 0 0em rgba(140,122,230,1),
-3em0em 0 -.5em rgba(255,159,243,1),
-2em -2em 0 -.5em rgba(72,84,96,1)
}
62.5% {
box-shadow:
0em -3em 0 -.5em rgba(231,76,60,1),
2em -2em 0 -.5em rgba(230,126,34,1),
3em 0em 0-.5em rgba(254,202,87,1),
2em2em 0 -.5em rgba(76,209,55,1),
0em3em 0 0em rgba(0,168,255,1),
-2em2em 0.2em rgba(140,122,230,1),
-3em0em 0 0em rgba(255,159,243,1),
-2em -2em 0 -.5em rgba(72,84,96,1)
}
75% {
box-shadow:
0em -3em 0 -.5em rgba(231,76,60,1),
2em -2em 0 -.5em rgba(230,126,34,1),
3em 0em 0-.5em rgba(254,202,87,1),
2em2em 0 -.5em rgba(76,209,55,1),
0em3em 0 -.5em rgba(0,168,255,1),
-2em2em 0 0em rgba(140,122,230,1),
-3em0em 0.2em rgba(255,159,243,1),
-2em -2em 0 0em rgba(72,84,96,1)
}
87.5% {
box-shadow:
0em -3em 0 0em rgba(231,76,60,1),
2em -2em 0 -.5em rgba(230,126,34,1),
3em 0em 0-.5em rgba(254,202,87,1),
2em2em 0 -.5em rgba(76,209,55,1),
0em3em 0 -.5em rgba(0,168,255,1),
-2em2em 0 -.5em rgba(140,122,230,1),
-3em0em 0 0em rgba(255,159,243,1),
-2em -2em 0.2em rgba(72,84,96,1)
}
}
</style>
</head>
<body>
<div class="load">鱼C工作室</div>
</body>
</html>
坐标
601900987 发表于 2018-7-18 22:49
@keyframes load-effect {
0%, 这里的逗号难以理 ...
设置了,0和100一样,所以用:0%,100%{}这样子一起设置了 601900987 发表于 2018-7-18 22:49
@keyframes load-effect {
0%, 这里的逗号难以理 ...
加一句,这是并集选择器,,是将这两的共同属性一起设置了,就不用在写一个0%或者100%语句了,简化了代码
页:
[1]