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>
相关文章
- Android开发笔记(一百八十七)利用估值器实现弹幕动画
- JS实现给网站添加加载动画
- 【ue4】【使用】动画
- HTML动画特效-电风扇(第二部)
- 7b2美化-网站添加悬浮动画广告
- 网站加开屏动画css引入版
- Cinema 4D Studio 24.113 for Mac(三维设计动画软件)
- KeyShot Pro for mac(3D渲染和动画制作软件) v11.3.2.3激活版
- 无限扩展的像素动画宇宙 #Floor796 是共创元宇宙的理想形态吗?
- 【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
- 腾讯动画《斗罗大陆2:绝世唐门》正式启动!概念海报公开
- Android图片翻转动画简易实现代码
- Android开发之图形图像与动画(四)AnimationListener简介
- JQuery动画和停止动画实例代码
- 把字符串转为HtmlTable演示动画
- jQuery实现级联菜单效果(仿淘宝首页菜单动画)
- js、jquery图片动画、动态切换示例代码