css:音乐唱片机随着播放暂停而旋转暂停
唱片机由两部分组成,一个是磁针,另一个是唱片
1. 先完成磁针随着播放按钮进行是否在唱片上的切换
原理:将播放暂停状态存入布尔值isbtnShow中,根据isbtnShow的值切换磁针的class。
css代码
磁针在暂停状态下是 transform: rotate(-13deg);
磁针在播放状态下是 transform: rotate(0deg);
因此添加磁针在播放状态的class
.img_needle_active { width: 2rem; height: 3rem; position: absolute; left: 46%; transform-origin: 0 0; transform: rotate(0deg); transition: all 2s; }
再判断点击播放按钮时将class从.img_needle换为.img_needle_active
为磁针添加动态class,当点击播放按钮时(即isbtnShow=1时),切换磁针的class为img_needle_active
<!-- 当!isbtnShow时唱片自转磁针转到唱片上 -->
<img src="@/assets/needle-ab.png" class="img_needle" :class="{img_needle_active:!isbtnShow}">
2.图片唱片随播放按钮旋转
唱片是通过旋转z轴从0到360度的,使用css3 @keyframes方法创建动画可以实现,再将动画的状态放入class中,通过动态切换class的方法实现唱片的自转和暂停
css代码:
.img_ar {
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
position: absolute;
bottom: 3.14rem;
animation: rotate_ar 10s linear infinite;
}
.img_ar_active{
animation-play-state: running;
}
.img_ar_paused{
animation-play-state: paused;
}
@keyframes rotate_ar {
0%{
transform: rotateZ(0deg);
}
100%{
transform: rotateZ(360deg);
}
}
vue代码:
<!-- 当!isbtnShow时唱片自转,isbtnShow时暂停 -->
<img :src="musicList.al.picUrl" class="img_ar" :class="{img_ar_active:!isbtnShow,img_ar_paused:isbtnShow}">
结果:
css:音乐唱片机随着播放暂停而旋转暂停的更多相关文章
- Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路
Android版网易云音乐唱片机唱片磁盘旋转及唱片机机械臂动画关键代码实现思路 先看一看我的代码运行结果. 代码运行起来初始化状态: 点击开始按钮,唱片机的机械臂匀速接近唱片磁盘,同时唱片磁盘也 ...
- 用RotateDrawable实现网易云音乐唱片机效果
imageMogr2/auto-orient/strip%7CimageView2/2/w/1240" alt="唱片机" title=""> ...
- css3动画应用-音乐唱片旋转播放特效
css3动画应用-音乐唱片旋转播放特效 核心点: 1.设置图片为圆形居中,使图片一直不停旋转. 2.文字标题(潘玮柏--反转地球)一直从左到右不停循环移动. 3.点击图标,音乐暂停,图片停止旋转:点击 ...
- html+css+js实现类似音乐app似的列表播放
最近做了一个类似于音乐app里面列表播放的功能,主要是音频播放和按钮状态的联动: 界面如下: 如上图所示 上面有一个播放按钮 下面有一个播放列表 上面还有一个歌曲长度的总时长 上面一个按钮能控制下面所 ...
- 类似百度音乐唱片播放时CD图片不停旋转的实现
类似百度音乐唱片播放时CD图片不停旋转的实现 效果图 1 html代码 2 <imgsrc="img/logo.png"class="img-responsive& ...
- Android 音视频深入 十三 OpenSL ES 制作音乐播放器,能暂停和调整音量(附源码下载)
项目地址https://github.com/979451341/OpenSLAudio OpenSL ES 是基于NDK也就是c语言的底层开发音频的公开API,通过使用它能够做到标准化, 高性能,低 ...
- H5多媒体(用面向对象的方法控制视频、音频播放、暂停、延时暂停)
视频,音频播放器会是我们在工作中用到的一些h5新标签,它自带一些属性,比如暂停播放,快进快退,但是,我们经常不用原生的样式或者方法,我们需要自定义这些按钮来达到我们需要的样式,也需要我们自定义来实现一 ...
- 轻仿QQ音乐之音频歌词播放、锁屏歌词-b
先上效果图 歌词播放界面 音乐播放界面 锁屏歌词界面 一. 项目概述 前面内容实在是太基础..只想看知识点的同学可以直接跳到第三部分的干货 项目播放的mp3文件及lrc文件均来自QQ音乐 本文主要主要 ...
- .net 网站中如何动态播放音乐,页面如何播放音乐
向别人请教有好处也有坏处,好处是你可以相对比较快的知道要点,坏处就是你TM的发现你弄了那么久都是白弄. 昨天今天一直在找一个问题的解决方案,我的问题描述大概是这样子的:我用vs2012开发的.net网 ...
随机推荐
- java基础-多线程-线程组
线程组 * Java中使用ThreadGroup来表示线程组,它可以对一批线程进行分类管理,Java允许程序直接对线程组进行控制. * 默认情况下,所有的线程都属于主线程组. * public fi ...
- vue引入echarts
效果图: 1.安装Echarts : npm install echarts -S 或者使用国内的淘宝镜像: 安装: npm install -g cnpm --registry=https: ...
- 前端实现导出excel
结果: 将网页上拿到的数据导出成excel文件 实现: HTML代码 <div> <button type="button" onclick="expo ...
- [ Skill ] map mapc mapcan mapcar mapcon maplist mapinto
https://www.cnblogs.com/yeungchie/ 几种 map 函数的差异 map map( lambda(( a b ) println( list( a b )) ) list ...
- Python入门-字符串格式化
一.不推荐使用:%号 #正常按照位置传递参数 print('%s asked %s to do something' % ('egon', 'lili')) #先后顺序不能乱 #字典传递参数 prin ...
- 我们可以定向调度某个pod在某个node上进行创建
集群环境:1.k8s用的是二进制方式安装 2.操作系统是linux (centos)3.操作系统版本为 7.2/7.4/7.94.k8s的应用管理.node管理.pod管理等用rancher.k8s令 ...
- 『现学现忘』Git基础 — 3、Git介绍
目录 1.Git的历史 2.Git的特点 3.Git在项目协作开发中所解决的问题 1.Git的历史 Git是目前世界上最先进的分布式版本控制系统,开源.免费. Git 是 Linus (林纳斯)为了帮 ...
- Fastjson JdbcRowSetImpl利用链学习
JdbcRowSetImpl 接着继续学习fastjson的第二条链JdbcRowSetImpl,主要是利用jndi注入达到的攻击,而且没有什么利用限制,而且其原理就是setter的自动调用,具体se ...
- 2021.12.08 [SHOI2009]会场预约(平衡树游码表)
2021.12.08 [SHOI2009]会场预约(平衡树游码表) https://www.luogu.com.cn/problem/P2161 题意: 你需要维护一个 在数轴上的线段 的集合 \(S ...
- 2021.12.07 [TJOI2013]最长上升子序列(Treap+DP)
2021.12.07 [TJOI2013]最长上升子序列(Treap+DP) https://www.luogu.com.cn/problem/P4309 题意: 给定一个序列,初始为空.现在我们将1 ...