css实现div一直旋转

看到音乐播放器播放界面的唱片一直旋转,突然想到在网页中的一直旋转效果,所有特地查了一下分享出来

这是一个静态的div,然后把它旋转动起来。

代码如下:

<html>
<head>
<meta charset="UTF-8">
<script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
<style>
#xuanzhun{
 -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s;
    -moz-transition-property: -moz-transform;
    -moz-transition-duration: 1s;
    -webkit-animation: rotate 3s linear infinite;
    -moz-animation: rotate 3s linear infinite;
    -o-animation: rotate 3s linear infinite;
    animation: rotate 3s linear infinite;
}
@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
    to{-webkit-transform: rotate(360deg)}
}
@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
    to{-moz-transform: rotate(359deg)}
}
@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
    to{-o-transform: rotate(359deg)}
}
@keyframes rotate{from{transform: rotate(0deg)}
    to{transform: rotate(359deg)}
}
</style>
</head>
<body>
<div id="xuanzhun" style="width: 30px; height: 30px; background-color: aquamarine;">
    
</div>
</body>
</html>

最重要的是style中的css部分。

猜你喜欢

转载自www.cnblogs.com/feipengting/p/9173770.html