body {
display:flex;
justify-content:center;
align-items:center;
height:900px;
background:black;
}
div {
opacity:0;
position:absolute;
width:300px;
height:80px;
border:1px solid white;
border-radius:100px;
}
#div2 {
-webkit-animation:name2 1s forwards;
box-shadow:forestgreen 1px 1px 5px 1px;
background:forestgreen;
}
#div3 {
-webkit-animation:name3 1s 0.6s forwards;
box-shadow:red 1px 1px 5px 1px;
background:red;
}
#div4 {
-webkit-animation:name4 1s 1.5s forwards;
box-shadow:hotpink 1px 1px 5px 1px;
background:hotpink;
}
#div5 {
-webkit-animation:name5 1s 2.5s forwards;
box-shadow:bisque 1px 1px 5px 1px;
background:bisque;
}
#div6 {
-webkit-animation:name6 1s 3.5s forwards;
box-shadow:saddlebrown 1px 1px 5px 1px;
background:saddlebrown;
}
#div7 {
-webkit-animation:name7 1s 4.5s forwards;
box-shadow:aqua 1px 1px 5px 1px;
background:aqua;
}
#div8 {
-webkit-animation:name8 1s 5.5s forwards;
box-shadow:#007AFF 1px 1px 5px 1px;
background:#007AFF;
}
#div9 {
-webkit-animation:name9 1s 6.5s forwards;
box-shadow:violet 1px 1px 5px 1px;
background:violet;
}
#div10 {
-webkit-animation:name10 1s 7.5s forwards;
box-shadow:blueviolet 1px 1px 5px 1px;
background:blueviolet;
}
#div11 {
-webkit-animation:name11 1s 8.5s forwards;
box-shadow:navy 1px 1px 5px 1px;
background:navy;
}
#div12 {
-webkit-animation:name12 1s 9.5s forwards;
box-shadow:khaki 1px 1px 5px 1px;
background:khaki;
}
#div13 {
-webkit-animation:name13 1s 10.5s forwards;
box-shadow:aqua 1px 1px 5px 1px;
background:aqua;
}
#div14 {
-webkit-animation:name14 1s 11.5s forwards;
box-shadow:darkcyan 1px 1px 5px 1px;
background:darkcyan;
}
#div15 {
-webkit-animation:name15 1s 12.5s forwards;
box-shadow:palegreen 1px 1px 5px 1px;
background:palegreen;
}
#div16 {
-webkit-animation:name16 1s 13.5s forwards;
box-shadow:palevioletred 1px 1px 5px 1px;
background:palevioletred;
}
#div17 {
-webkit-animation:name17 1s 14.5s forwards;
box-shadow:lawngreen 1px 1px 5px 1px;
background:lawngreen;
}
#div18 {
-webkit-animation:name18 1s 15.5s forwards;
box-shadow:mediumslateblue 1px 1px 5px 1px;
background:mediumslateblue;
}
#div19 {
-webkit-animation:name19 1s 16.5s forwards;
box-shadow:mediumvioletred 1px 1px 5px 1px;
background:mediumvioletred;
}
#div20 {
-webkit-animation:name20 1s 17.5s forwards;
box-shadow:olivedrab 1px 1px 5px 1px;
background:olivedrab;
}
#div21 {
-webkit-animation:name21 1s 18.5s forwards;
box-shadow:navy 1px 1px 5px 1px;
background:navy;
}
#div22 {
-webkit-animation:name22 1s 19.5s forwards;
box-shadow:coral 1px 1px 5px 1px;
background:coral;
}
#div23 {
-webkit-animation:name23 1s 20.5s forwards;
box-shadow:mediumslateblue 1px 1px 5px 1px;
background:mediumslateblue;
}
#div24 {
-webkit-animation:name24 1s 21.5s forwards;
box-shadow:skyblue 1px 1px 5px 1px;
background:skyblue;
}
#div25 {
-webkit-animation:name25 1s 22.5s forwards;
box-shadow:goldenrod 1px 1px 5px 1px;
background:goldenrod;
}
#div26 {
-webkit-animation:name26 1s 23.5s forwards;
box-shadow:#C71585 1px 1px 5px 1px;
background:#C71585;
}
#div27 {
-webkit-animation:name27 1s 24.5s forwards;
box-shadow:sandybrown 1px 1px 5px 1px;
background:sandybrown;
}
#div28 {
-webkit-animation:name28 1s 25.5s forwards;
box-shadow:#F0AD4E 1px 1px 5px 1px;
background:#F0AD4E;
}
#div29 {
-webkit-animation:name29 1s 26.5s forwards;
box-shadow:palevioletred 1px 1px 5px 1px;
background:palevioletred;
}
#div30 {
-webkit-animation:name30 1s 27.5s forwards;
box-shadow:yellow 1px 1px 5px 1px;
background:yellow;
}
#div31 {
-webkit-animation:name31 1s 28.5s forwards;
box-shadow:indianred 1px 1px 5px 1px;
background:indianred;
}
#div32 {
-webkit-animation:name32 1s 29.5s forwards;
box-shadow:mediumturquoise 1px 1px 5px 1px;
background:mediumturquoise;
}
#div33 {
-webkit-animation:name33 1s 30.5s forwards;
box-shadow:lightgrey 1px 1px 5px 1px;
background:lightgrey;
}
#div34 {
-webkit-animation:name34 1s 31.5s forwards;
box-shadow:dimgrey 1px 1px 5px 1px;
background:dimgrey;
}
#div35 {
-webkit-animation:name35 1s 32.5s forwards;
box-shadow:tomato 1px 1px 5px 1px;
background:tomato;
}
#div36 {
-webkit-animation:name36 1s 33.5s forwards;
box-shadow:#8A2BE2 1px 1px 5px 1px;
background:#8A2BE2;
}
#div37 {
-webkit-animation:name37 1s 34.5s forwards;
box-shadow:darkorange 1px 1px 5px 1px;
background:#8A2BE2;
}
@keyframes name2 {
from {
-webkit-transform:rotate(0deg);
opacity:0;
}
to {
-webkit-transform:rotate(10deg);
opacity:0.1;
}
}@keyframes name3 {
from {
-webkit-transform:rotate(10deg);
opacity:0;
}
to {
-webkit-transform:rotate(20deg);
opacity:0.1;
}
}@keyframes name4 {
from {
-webkit-transform:rotate(20deg);
opacity:0;
}
to {
-webkit-transform:rotate(30deg);
opacity:0.1;
}
}@keyframes name5 {
from {
-webkit-transform:rotate(30deg);
opacity:0;
}
to {
-webkit-transform:rotate(40deg);
opacity:0.1;
}
}@keyframes name6 {
from {
-webkit-transform:rotate(40deg);
opacity:0;
}
to {
-webkit-transform:rotate(50deg);
opacity:0.1;
}
}@keyframes name7 {
from {
-webkit-transform:rotate(50deg);
opacity:0;
}
to {
-webkit-transform:rotate(60deg);
opacity:0.1;
}
}@keyframes name8 {
from {
-webkit-transform:rotate(60deg);
opacity:0;
}
to {
-webkit-transform:rotate(70deg);
opacity:0.1;
}
}@keyframes name9 {
from {
-webkit-transform:rotate(70deg);
opacity:0;
}
to {
-webkit-transform:rotate(80deg);
opacity:0.1;
}
}@keyframes name10 {
from {
-webkit-transform:rotate(80deg);
opacity:0;
}
to {
-webkit-transform:rotate(90deg);
opacity:0.1;
}
}@keyframes name11 {
from {
-webkit-transform:rotate(90deg);
opacity:0;
}
to {
-webkit-transform:rotate(100deg);
opacity:0.1;
}
}@keyframes name12 {
from {
-webkit-transform:rotate(100deg);
opacity:0;
}
to {
-webkit-transform:rotate(110deg);
opacity:0.1;
}
}@keyframes name13 {
from {
-webkit-transform:rotate(110deg);
opacity:0;
}
to {
-webkit-transform:rotate(120deg);
opacity:0.1;
}
}@keyframes name14 {
from {
-webkit-transform:rotate(120deg);
opacity:0;
}
to {
-webkit-transform:rotate(130deg);
opacity:0.1;
}
}@keyframes name15 {
from {
-webkit-transform:rotate(130deg);
opacity:0;
}
to {
-webkit-transform:rotate(140deg);
opacity:0.1;
}
}@keyframes name16 {
from {
-webkit-transform:rotate(140deg);
opacity:0;
}
to {
-webkit-transform:rotate(150deg);
opacity:0.1;
}
}@keyframes name17 {
from {
-webkit-transform:rotate(150deg);
opacity:0;
}
to {
-webkit-transform:rotate(160deg);
opacity:0.1;
}
}@keyframes name18 {
from {
-webkit-transform:rotate(160deg);
opacity:0;
}
to {
-webkit-transform:rotate(170deg);
opacity:0.1;
}
}@keyframes name19 {
from {
-webkit-transform:rotate(170deg);
opacity:0;
}
to {
-webkit-transform:rotate(180deg);
opacity:0.1;
}
}@keyframes name20 {
from {
-webkit-transform:rotate(180deg);
opacity:0;
}
to {
-webkit-transform:rotate(190deg);
opacity:0.1;
}
}@keyframes name21 {
from {
-webkit-transform:rotate(190deg);
opacity:0;
}
to {
-webkit-transform:rotate(200deg);
opacity:0.1;
}
}@keyframes name22 {
from {
-webkit-transform:rotate(200deg);
opacity:0;
}
to {
-webkit-transform:rotate(210deg);
opacity:0.1;
}
}@keyframes name23 {
from {
-webkit-transform:rotate(210deg);
opacity:0;
}
to {
-webkit-transform:rotate(220deg);
opacity:0.1;
}
}@keyframes name24 {
from {
-webkit-transform:rotate(220deg);
opacity:0;
}
to {
-webkit-transform:rotate(230deg);
opacity:0.1;
}
}@keyframes name25 {
from {
-webkit-transform:rotate(230deg);
opacity:0;
}
to {
-webkit-transform:rotate(240deg);
opacity:0.1;
}
}@keyframes name26 {
from {
-webkit-transform:rotate(240deg);
opacity:0;
}
to {
-webkit-transform:rotate(250deg);
opacity:0.1;
}
}@keyframes name27 {
from {
-webkit-transform:rotate(250deg);
opacity:0;
}
to {
-webkit-transform:rotate(260deg);
opacity:0.1;
}
}@keyframes name28 {
from {
-webkit-transform:rotate(260deg);
opacity:0;
}
to {
-webkit-transform:rotate(270deg);
opacity:0.1;
}
}@keyframes name29 {
from {
-webkit-transform:rotate(270deg);
opacity:0;
}
to {
-webkit-transform:rotate(280deg);
opacity:0.1;
}
}@keyframes name30 {
from {
-webkit-transform:rotate(280deg);
opacity:0;
}
to {
-webkit-transform:rotate(290deg);
opacity:0.1;
}
}@keyframes name31 {
from {
-webkit-transform:rotate(290deg);
opacity:0;
}
to {
-webkit-transform:rotate(300deg);
opacity:0.1;
}
}@keyframes name32 {
from {
-webkit-transform:rotate(300deg);
opacity:0;
}
to {
-webkit-transform:rotate(310deg);
opacity:0.1;
}
}@keyframes name33 {
from {
-webkit-transform:rotate(310deg);
opacity:0;
}
to {
-webkit-transform:rotate(320deg);
opacity:0.1;
}
}@keyframes name34 {
from {
-webkit-transform:rotate(320deg);
opacity:0;
}
to {
-webkit-transform:rotate(330deg);
opacity:0.1;
}
}@keyframes name35 {
from {
-webkit-transform:rotate(330deg);
opacity:0;
}
to {
-webkit-transform:rotate(340deg);
opacity:0.1;
}
}@keyframes name36 {
from {
-webkit-transform:rotate(340deg);
opacity:0;
}
to {
-webkit-transform:rotate(350deg);
opacity:0.1;
}
}@keyframes name37 {
from {
-webkit-transform:rotate(350deg);
opacity:0;
}
to {
-webkit-transform:rotate(360deg);
opacity:0.1;
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
