项目场景：

通常h5项目中的音乐图标会有旋转动画,我们需要进行暂停播放,展示对应的旋转动画

问题描述

通常的做法,创建旋转动画,暂停的时候移除toggleAudioAni类名,达到暂停的效果,但是会存在一个问题,旋转角度会立马转到0,体验效果非常差

@-webkit-keyframes audio_icon {0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);transform: rotate(360deg);}
}
.toggleAudioAni{-webkit-animation: audio_icon 2s linear infinite;animation: audio_icon 2s linear infinite;
}

原因分析：

移除类名后,动画会立即被移除,元素会重置到初始化的角度(0)

解决方案：

解决方案也很简单,我们只需把toggleAudioAni换成下列css代码

.toggleAudioAni {

animation-play-state: paused !important;

-webkit-animation-play-state: paused !important;

}

把之前toggleAudioAni的css代码放到图标的css里即可

示例:

.audio_icon {

background: url(../img/kv/audio.png?v=1.0.0)no-repeat center/100% 100%;

-webkit-animation: audio_icon 2s linear infinite;

animation: audio_icon 2s linear infinite;

}

.toggleAudioAni {

animation-play-state: paused !important;

-webkit-animation-play-state: paused !important;

}

CSS图片旋转/暂停后保持旋转状态(音乐播放常用)相关推荐

HTML+CSS制作一款情人节一款带音乐播放的情人节网页背景素材
制作一款情人节一款带音乐播放的情人节网页背景素材.随着音乐旋转如钻石般的大爱心和满屏大小颜色不一的小爱心浪漫又梦幻,是情人节不可多得的网页素材哦. 演示地址:点我查看演示代码实现 html < ...
微信小程序做一个圆形图片旋转可以控制开始和结束-音乐播放器的图片旋转功能
微信小程序做一个圆形图片旋转可以控制开始和结束 1.在 WXML 文件中添加一个标签,并设置图片的 src 和样式,并为其绑定一个 animation 用来控制旋转动画. <image src ...
音乐磁盘样式怎么用css做,使用余弦定理制作磁盘形状h5音乐播放器_html/css_WEB-ITnose...
目录 [1]功能实现 [2]效果展示 [3]原理说明旋转原理余弦定理 [4]代码实现 HTML CSS JS [5]源码查看功能实现 [1]歌曲播放进度转换成视觉的旋转角度 [2]点击磁盘任意位 ...
前端学习小demo：使用HTML+CSS+bootstrap+Vue2.0编写一个简易的音乐播放器（仿网易云）
具体的操作流程(实现步骤): 1.歌曲搜索 2.歌曲播放 3.歌曲评论 4.播放歌曲的MV(有的歌曲没有MV) 代码编写过程: 1.创建一个Vue项目(前提是安装好了node.js.npm.vue) ...
【html、css、jq】制作一个简洁的音乐播放器
声明:本文章版权归饥人谷和张新望所有,转载需经作者同意这个播放器的音乐是通过豆瓣FM的API获取到的,我们可以随机的听到豆瓣FM的任何音乐.(这些API是饥人谷的老师整理的) DEMO html+j ...
css3音乐播放动画,css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
图片导入ppt后模糊_PPT设计，找图也是一种能力
关注[新精英充电站]能力提升看得见! 除了拍摄的图片.公司产品的效果图等,有时还需要从网络中获取一些图片资源.对于PPT设计而言,会找图片也是一种能力的表现.高手往往能既快速又准确地找到高质量的配图. ...
Android实现音乐播放器，Service后台播放Notification控制播放状态
本音乐播放器的功能: 1.实现访问手机本地的.mp3音乐文件: 2.在主页中将访问的数据显示出来(这里简单点用ListView,用RecycleView当然也可以): 3.在播放音乐页面实现上一首.下 ...
Android在图片画线(放大,旋转,平移后可继续正确画线,限制画线区域)
最近因为公司业务需求,需要给学校的老师们做一个在手机和电脑上同步进行图片上画线批注的效果.刚开始在github上看了几天, 但跟我们要求吻合的开源项目几乎没有.最后只能自己来实现一个相应的功能,经过一 ...

CSS图片旋转/暂停后保持旋转状态(音乐播放常用)

项目场景：

问题描述

原因分析：

解决方案：

CSS图片旋转/暂停后保持旋转状态(音乐播放常用)相关推荐

最新文章

热门文章