您的位置:首页 - 教程 - web前端 - 正文
音乐播放图标旋转和停止CSS3动画+JS控制

现在许多有背景音乐的特效,都会提供一个图标控制播放和暂停。播放时图标不断旋转,暂停时就静止不动。例如下面何问起生日快乐例子。

http://hovertree.com/wx/hwq/9/

效果图:


也可以在微信查看效果,关注何问起的微信公众号, 账号 ihewenqi ,或者微信扫描下面二维码:


关注后发送 生日 ,根据回复内容查看效果。

另一个例子:http://hovertree.com/hvtart/bjae/ajyo2cux.htm

那么这个旋转的音乐图标效果是怎么实现的呢?

首先是动画,动画是用CSS3实现的,控制则可以用JS实现。

CSS3的动画可以用animation 属性定义。参考:
http://hovertree.com/h/bjaf/pr_animation.htm

一个例子:
http://hovertree.com/texiao/css/14/1.htm

代码:
<style>div.movehovertree {
width: 140px;
height: 140px;
background-color:darkgreen;

position: relative;/*如果是左右移动,这句要加上,不加就不可以。*/

animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite; /*Safari and Chrome*/
margin:2px;
}

@keyframes mymove {
from {
left: 0px;
}

to {
left: 200px;
}
}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {
left: 0px;
}

to {
left: 100px;
}
}
</style>
<div class="movehovertree">何问起</div>
效果如下:
何问起


这个是水平移动动画的代码,那么旋转呢,旋转可以用CSS3 的transform 属性定义,参考:
http://hovertree.com/h/bjaf/pr_transform.htm

示例代码:

<style>div.rotateHovertree
{
margin:30px;
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(9deg);
-ms-transform:rotate(9deg); /* Internet Explorer */
-moz-transform:rotate(9deg); /* Firefox */
-webkit-transform:rotate(9deg); /* Safari 和 Chrome */
-o-transform:rotate(9deg); /* Opera */
}
</style><div class="rotateHovertree">hovertree.com</div>

效果如下:
hovertree.com


接下来就是旋转加动画,旋转从 0度到360度,示例代码:
<style>div.runhovertree {
width: 140px;
height: 140px;
background-color:darkgreen;

position: relative;/*如果是左右移动,这句要加上,不加就不可以。*/

animation: myrun 5s infinite;
-webkit-animation: myrun 5s infinite; /*Safari and Chrome*/
margin:2px;
}

@keyframes myrun {
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}

@-webkit-keyframes myrun /*Safari and Chrome*/
{
from {
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* Internet Explorer */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform:rotate(360deg);
-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
</style>
<div class="runhovertree">何问起</div>


效果如下:
何问起


接下来把div背景图片设为音乐图标,去掉背景色,设置合适的高宽。查看效果:http://hovertree.com/texiao/css3/3/1.htm

音乐图标动起来了,转起来了。但是好像跟使用中的效果的不一样。
对比http://hovertree.com/wx/hwq/9/
可以发现,转动的时候时快时慢。

那么怎样规定速度呢?只需animation属性加上linear值就可以了。参考:http://hovertree.com/h/bjaf/pr_transition-timing-function.htm

点击这里查看效果:http://hovertree.com/texiao/css3/3/2.htm

代码如下:
<style>
div.hovertreemusic {
width: 45px;
height: 45px;
animation: hovertreerotate 2s linear infinite;
-webkit-animation: hovertreerotate 2s linear infinite; /*Safari and Chrome*/
margin: 2px;
background-image: url(http://hovertree.com/wx/hwq/10/css/music_note_big.png);
}

@keyframes hovertreerotate {
from {
transform: rotate(0deg);
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform: rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}

@-webkit-keyframes hovertreerotate /*Safari and Chrome*/
{
from {
transform: rotate(0deg);
transform:rotate(0deg);
-ms-transform:rotate(0deg); /* IE 9 */
-moz-transform:rotate(0deg); /* Firefox */
-webkit-transform:rotate(0deg); /* Safari 和 Chrome */
-o-transform:rotate(0deg); /* Opera */
}

to {
transform: rotate(360deg);
-ms-transform:rotate(360deg); /* IE 9 */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */
}
}
</style>
<div class="hovertreemusic"></div>


接下来就实现点击停止转动或者开始转动。使用js实现,给div加上id属性:
id="hovertreemusic"
点击的时候判断className,如果包含hovertreemusic就移除,不包含就加入。
效果:http://hovertree.com/texiao/css3/3/3.htm

评论: