css实现div一直旋转

最新推荐文章于 2024-06-20 04:45:00 发布

weixin_33696822

最新推荐文章于 2024-06-20 04:45:00 发布

阅读量704

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/feipengting/p/9173770.html

版权

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

这是一个静态的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部分。

转载于:https://www.cnblogs.com/feipengting/p/9173770.html

weixin_33696822

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
css实现div一直旋转

看到音乐播放器播放界面的唱片一直旋转，突然想到在网页中的一直旋转效果，所有特地查了一下分享出来这是一个静态的div,然后把它旋转动起来。效果请看右上角的音乐播放按键一样。代码如下：<html><head><meta charset="UTF-8"><script src="http://apps.bdimg.com/libs/j...
复制链接

扫一扫