Html
    Css
    Js

    
                        
body {
	background-color:blueviolet;
}
.circle1 {
	width:100px;
	height:100px;
	border-radius:100px;
	position:absolute;
	z-index:2;
	left:140px;
	-webkit-animation:myfirst1 5s linear infinite;
}
@-webkit-keyframes myfirst1 {
	0% {
	transform:rotate(0deg);
	box-shadow:0px 0px 10px #fff;
}
50% {
	transform:rotate(180deg);
	box-shadow:0px 0px 45px #fff;
}
100% {
	transform:rotate(360deg);
	box-shadow:0px 0px 10px #fff;
}
}.circle2 {
	width:10px;
	height:10px;
	border:4px solid #ddd;
	border-radius:20px;
	left:45px;
	top:5px;
	position:absolute;
	z-index:2;
	overflow:hidden;
	background-color:#ddd;
	box-shadow:0px 0px 5px #fff;
}

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

css3转动动画

0