最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
css3实现音乐动画播放的例子
时间：2022-06-25 13:34:06 编辑：袖梨 来源：一聚教程网
刚刚做了一个项目，涉及到音乐播放动画的效果，通过查找资料学习，最终实现了这一效果，还是满满的成就感，在这里就把实现的代码奉献给大家
第一步：首先写好HTML代码
是不是很简单呢
第二部：给代码中的类名，标签附加样式
#audio-btn {
position: absolute;
right: 0;
display: inline-block;
background: url(images/home/music_icon.png) no-repeat center center;
background-size: 30.5px 30.5px;
}
.audio-rotate {
-webkit-animation: rotating 1.2s linear infinite;
-moz-animation: rotating 1.2s linear infinite;
-o-animation: rotating 1.2s linear infinite;
animation: rotating 1.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)
}
}
这里应用的是css3的动画动能
第三部:js代码
先引入js框架
在写js实现相关效果
相关文章
- 红色沙漠玩家通过释放捕获的蜜蜂击败boss 08-15
- 爱发电网页版登录地址链接-爱发电登录入口 08-15
- soso街景地图如何入驻商家 腾讯地图入驻商家方法介绍 08-15
- 华为mate60pro麒麟芯片回归吗 08-15
- MC在线玩网页版网址是什么-mc我的世界在线玩网页版免费免登陆入口 08-15
- 微信对话生成器（无水印）免费下载-微信对话生成器下载 08-15