最新下载
热门教程
- 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实现相关效果
相关文章
- 王楚然/丞磊成何体统全集资源高清无删减无广告在线观看地址 01-21
- 电视剧成何体统夸克网盘资源高清完整版1080p下载 01-21
- 电影镖人阿里云盘全集高清1080P资源链接 01-21
- qq邮箱网页版快捷入口-qq邮箱一键登录网页版 01-21
- 126邮箱登录入口手机版适配升级-126邮箱登录入口加密安全防护 01-21
- 哔咔漫画下载入口一键直达-哔咔漫画官方正版安全无捆绑下载 01-21