最新下载
热门教程
- 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实现相关效果
相关文章
- 我的新加密货币税收法案将终结不公平行为：参议员卢米斯 07-12
- 剑星活肤紧身服怎样进行获取呢 活肤紧身服收集方法介绍 07-12
- 原神伊涅芙的定位是什么 伊涅芙定位介绍 07-12
- 原神伊涅芙是哪个国家的 伊涅芙所属国家介绍 07-12
- 无畏契约源能行动官网地址 官网预约地址介绍 07-12
- ps怎样把相机拍摄的图片制作成手工写实插画的效果? 07-12