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; } }
css简单旋转动画效果,方式有点麻烦