Html
    Css
    Js

    
                        
			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;
}
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

纯css动画旋转效果

css简单旋转动画效果,方式有点麻烦

0