360度不停旋转动画demo效果示例（整理）
<!DOCTYPE html>
<html lang="en">
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>360度不停旋轉動畫</title>
?? ??? ?<style>
?? ??? ??? ?#audio_btn {
?? ??? ??? ??? ?width: 30px;
?? ??? ??? ??? ?height: 30px;
?? ??? ??? ??? ?background: red;
?? ??? ??? ??? ?/*border-radius: 60px;*/
?? ??? ??? ??? ?float: left;
?? ??? ??? ?}
?? ??? ??? ?.rotate {
?? ??? ??? ??? ?-webkit-animation: rotating 2s linear infinite;
?? ??? ??? ??? ?-moz-animation: rotating 2s linear infinite;
?? ??? ??? ??? ?-o-animation: rotating 2s linear infinite;
?? ??? ??? ??? ?animation: rotating 2s linear infinite
?? ??? ??? ?}
?? ??? ??? ?@-webkit-keyframes rotating {
?? ??? ??? ??? ?from {
?? ??? ??? ??? ??? ?-webkit-transform: rotate(0)
?? ??? ??? ??? ?}
?? ??? ??? ??? ?to {
?? ??? ??? ??? ??? ?-webkit-transform: rotate(360deg)
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?@keyframes rotating {
?? ??? ??? ??? ?from {
?? ??? ??? ??? ??? ?transform: rotate(0)
?? ??? ??? ??? ?}
?? ??? ??? ??? ?to {
?? ??? ??? ??? ??? ?transform: rotate(360deg)
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ??? ?@-moz-keyframes rotating {
?? ??? ??? ??? ?from {
?? ??? ??? ??? ??? ?-moz-transform: rotate(0)
?? ??? ??? ??? ?}
?? ??? ??? ??? ?to {
?? ??? ??? ??? ??? ?-moz-transform: rotate(360deg)
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div id="audio_btn" class="rotate"></div>
?? ?</body>
</html>
總結
以上是生活随笔為你收集整理的360度不停旋转动画demo效果示例（整理）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 操作系统——7.虚拟存储技术
- 下一篇： 抽奖随机滚动_如何在party上用来宾的