【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5

效果实现还是很基础的主要是动画简单的动画使用了css的transition 过渡加 hover实践实现

盘转动的使用了js 因考虑到停止时暂不能解决停留在原处故使用的 setInterval 定时器改变样式

使用了移入onmouseover事件移出onmouseout事件

废话不多说直接上代码和效果效果有点卡顿直接复制代码自己看效果

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>悟空留声机</title></head><body><div id="tab"><div class="audio"><div class="audio-views"><img src="ldimg/k.png" alt=""></div><div class="audio-stick"></div></div></div><style type="text/css">.audio{position: relative;width: 180px;height: 180px;padding: 20px;}.audio-views{background: radial-gradient(#000, #999, #000);padding: 30px;width: 130px;height: 130px;border-radius: 50%;overflow: hidden;/* transition: all 0.01s; */}.audio-views img{width: 100%;height: 100%;background: #000;border-radius: 50%;overflow: hidden;}.audio-stick{position: absolute;height: 80px;width: 2px;background: red;top: 0;left: 50%;transform-origin: left top;transform: rotate(-70deg);z-index: 1002;margin-left: 2px;transition: all 1s;}.audio-sticks{transform: rotate(-45deg);transition: all 1s;}</style><script type="text/javascript">let audio = document.getElementsByClassName('audio-views')[0], stick = document.getElementsByClassName('audio-stick')[0], num = 0, time = nullaudio.onmouseover = () => {time = setInterval(() => {audio.style.transform = 'rotate(' + (num += 0.1) + 'deg)'}, 10)stick.classList.add('audio-sticks')}audio.onmouseout = () => {clearInterval(time)stick.classList.remove('audio-sticks')}</script></body>
</html>

【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5相关推荐

duilib 模仿网易云音乐
duilib 模仿网易云音乐 duilib+cef+html实现,目前只有前端简单框架想要交流的,可以加qq:1021766106,或者微信:Official6-8一起交流技术栈
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法二）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
自定义QListWidget实现item被hover时改变图标样式（模仿网易云音乐选项列表）（方法一）
环境配置 :MinGW + QT 5.12 效果图: 这里需要说明一下:QListWidget是鼠标press时item就会被选中,自定义的TestListWidget类重写了mousePressEv ...
基于Qt模仿网易云音乐播放器
基于Qt模仿网易云音乐界面,目前只实现了部分界面,后续继续完善改造. 部分代码: #ifndef MYSQLDATAMGR_H #define MYSQLDATAMGR_H#include <Q ...
模仿网易云音乐鲸云特效动效
JinyunEffect 项目地址:tyhjh/JinyunEffect 简介: 模仿网易云音乐鲸云特效动效更多:作者提 Bug 标签: # Android 粒子特效--网易云鲸云特效文 ...
微信小程序实战教程：模仿—网易云音乐（二）
接上一篇:微信小程序实战教程:模仿-网易云音乐(一) wxml进行渲染:  <view class="lyric-content" hidden ...
Qt之模仿网易云音乐广告Banner
文章目录环境代码使用效果代码分享环境 vs2013 + Qt5.6.2 代码 NetEasyBanner.h #ifndef NETEASYBANNER_H #define NETEASY ...
原生js模仿网易云音乐首页轮播图
前端初学者,最近在学习该如何写轮播图.看了一些大神的教程之后,想模仿着写一个和网易云音乐首页类似的轮播图.由于还没有学JQuery,所以自己想了个函数用来实现淡入的效果.逻辑思路借鉴了爱嘎的Front ...
网易云音乐不能加载音乐解决办法
最近在这边机房用网易云音乐听歌发现音乐总是加载不出来,作为云村老司机的程序猿,肯定不能容忍这样的事情发生,于是我就想了解决的办法. WIn+R 输入%userprofile%/appdata/loca ...

【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5

【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5相关推荐

最新文章

热门文章