CSS伪3d旋转
通过少量的css3的transform动画效果即可完成。
源码:
<!doctype html>
<html>
<head>
<meta charset='UTF-8'>
<title>css伪3d旋转</title>
<style type='text/css'>
.wrap {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
box-shadow: inset 1px 2px 1px rgba(255, 0, 0, 0.5);
border: 1px solid rgba(255, 0, 0, 0.5);
border-radius: 50%;
-webkit-animation: change 1s linear infinite;
}
@-webkit-keyframes 'change' {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
</style>
</head>
<body>
<div class='wrap'></div>
</body>
</html>