360度不停旋转动画-转圈圈

简介: 360度不停旋转动画-转圈圈

<!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>
目录
打赏
0
0
0
0
12
分享
相关文章
背景滑动,动感加倍:CSS动画对角线效果全解析!
背景滑动,动感加倍:CSS动画对角线效果全解析!
一个小球从100米落下,每次落下弹起的高度是上一次的一半,问需要几次后高度小于10米?
一个小球从100米落下,每次落下弹起的高度是上一次的一半,问需要几次后高度小于10米?
72 0
|
9月前
|
C++
一个球从100米高度自由落下,每次落地后反弹回原高度的一半,再落下再反弹,求它在第10次落地时共经过多少米,第10次反弹多高。
这段内容包含两部分:代码示例和两个图片。代码是一个C++程序,主要逻辑是循环10次,每次迭代中更新变量x和y的值。图片似乎显示了代码执行前后的结果,但具体细节无法在摘要中体现。
87 0
一个球从 1000 米高空掉落,每次弹起高度是上一次的 50% ,弹几次后,高度低于 1 米
一个球从 1000 米高空掉落,每次弹起高度是上一次的 50% ,弹几次后,高度低于 1 米
106 0
|
9月前
|
消除游戏中图标下落的原理和实现
消除游戏中图标下落的原理和实现
60 1
一秒钟的魔法:揭秘CSS动画的神奇效果(上)
一秒钟的魔法:揭秘CSS动画的神奇效果(上)
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
水波涟漪,使用SwiftUI做一个仿iPhone隔空投送动画~
190 0
一个球从100m高度自由落下,每次落地后反弹回原来高度的一半,在落下,在反弹,求它在第十次落地时共经历了多少米,第十次反弹多高。
一个球从100m高度自由落下,每次落地后反弹回原来高度的一半,在落下,在反弹,求它在第十次落地时共经历了多少米,第十次反弹多高。
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等