微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）

下面代码的效果是网易云音乐唱针和黑胶唱片的CSS效果实现方式，播放等并没贴出来

实现效果的范围

动态图效果预览：

stylusW,panW是获取系统宽度计算后的参数

wxml部分:

<!-- 黑胶唱片唱针部分 --><view class='stylusBox' style='top: {{ -stylusW*0.5 }}px'><view class='stylus_1' style='width: {{ stylusW }}px; height: {{ stylusW }}px'><view class='stylus_2'><view class='stylus_3'></view><view class='stylus_4' style='top: {{ stylusW*0.8 }}px'><view class='stylus_5'><view class='stylus_6'></view><view class='stylus_7'><view class='stylus_8'><view class='stylus_9 stylus_10'></view><view class='stylus_9 stylus_11'></view></view></view></view></view></view></view></view><!-- 黑胶唱片部分 --><view class='level_1' style='width: {{ panW*0.9 }}px; height: {{ panW*0.9 }}px'><view class='level_2'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3'><view class='level_3 level_4'><view class='level_3 level_5'><image src='http://singerimg.kugou.com/uploadpic/softhead/400/20160715/20160715112816750.jpg'></image></view></view></view></view></view></view></view></view></view></view></view></view></view></view></view></view>
</view>

wxss部分：

/*** 黑胶唱片唱针样式效果*/
.stylusBox{position: absolute;width: 100%;display: flex;justify-content: center;
}.stylus_1{background-color: rgba(0, 0, 0, 0.2);border-radius: 50%;position: relative;z-index: 1;transform:rotate(-18deg);transition: all 2s ease-in-out;animation: mymovess 2s;
}@keyframes mymovess{from {transform:rotate(-40deg);}to {transform:rotate(-18deg);}
}.stylus_2{width: 76%;height: 76%;border-radius: 50%;margin: 12%;background-color: #ffffff;display: flex;justify-content: center;align-items: center;z-index: 2;
}.stylus_3{width: 40%;height: 40%;border-radius: 50%;background-color: #e5e5e5;
}.stylus_4{width: 20%;height: 170%;position: absolute;z-index: -1;border-radius: 50px;background: linear-gradient(to right, #b3b3b1, #d3d3d3, #b3b3b1);
}.stylus_5{width:100%;height:56%;position:relative;bottom:-88%;left: 18rpx;background: linear-gradient(to right, #b3b3b1, #d3d3d3, #b3b3b1); transform:rotate(-25deg);
}.stylus_6{width: 30%;height: 20%;background-color: #3e3e3e;position: absolute;bottom: 0;left: 35%;border-radius: 10px 10px 0 0;
}.stylus_7{width: 135%;height: 60%;border-radius: 5px 5px 0 0;position: absolute;bottom: -58%;left: -15%;background: linear-gradient(#b3b3b1, #d3d3d3);
}.stylus_8{width: 150%;height: 75%;position: relative;bottom: -98%;left: -6rpx;border-radius: 5px;background: linear-gradient(to right, #b3b3b1, #d3d3d3, #b3b3b1);
}.stylus_9{width: 8%;height: 50%;background-color: #b1b1b1;position: absolute;top: 20%;
}.stylus_10{left: 8rpx;
}.stylus_11{left: 30rpx;
}/*** 黑胶唱片样式效果*/
.level_1{background-color: rgba(255, 255, 255, 0.2);margin: 0 auto;position: relative;top: 150rpx;border-radius: 50%;padding: 1.5%;animation: mymove 10s linear infinite;animation-delay: 2s;
}@keyframes mymove
{from {transform:rotate(0deg);}to {transform:rotate(360deg);}
}.level_2{width: 97%;height: 97%;background-color: #262628;border-radius: 50%;padding: 1.5%;background: linear-gradient(#101012, #272729, #101012);
}.level_3{width:97%;height:97%;border:1px solid #131315;border-radius:50%;padding:1%;
}.level_4{height: 92%;width: 92%;border: 5px solid #0b0708;
}.level_5{width: 100%;height: 100%;border: none;padding: 0;
}.level_5>image{width: 100%;height: 100%;border-radius:50%;
}

微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）相关推荐

使用css动画实现网易云音乐播放界面波浪动画效果
通过实现CSS实现仿网易云音乐播放界面动画效果,最终的效果如下界面布局图片也是实现滚动效果的,使用四个div,来标识每一帧波动的效果. <div class="container- ...
仿网易云音乐播放界面
前言网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.笔者出于学习与挑战的想法,思考播放界面背后的实现原理,并写了一个小程序. 笔者尽可能地去模仿官方的视觉.交 ...
微信小程序云开发之网易云音乐
这是跟着慕课网谢成老师敲得代码注意知识点疑惑思路妙优化一个要注意的地方:如果获取歌词的时候报错(才发现解决办法的图片没传上来大概就是改变一下请求头数据) 第一章课程介绍云开发(音乐播 ...
Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅.这里抛砖引玉,原文地址:http://www.jianshu.com/p/cb54990219d9 首先来 ...
java4android网易云,Android仿网易云音乐播放界面
概述网易云音乐是一款非常优秀的音乐播放器,尤其是播放界面,使用唱盘机风格,显得格外古典优雅. 首先来看一下网易的播放效果. 要实现上面的功能,我们需要对界面进行一个拆分,拆分后大概包含如下结构: 主 ...
Android高仿网易云音乐播放界面
现在很多的播放器的播放界面都是采用光盘的转动,下面是我仿造网易的播放界面.先上两张图: 第一张为播放前的界面,第二张为点击播放按钮的图片.布局文件如下: <RelativeLayout xmln ...
自定义仿网易云音乐播放界面
清单文件添加 <service android:name="com.rookie.shiyue20180528.model.MusicService"android:enab ...
【HTML+CSS】仿网易云音乐网站
[HTML+CSS]仿网易云音乐网站
移动应用开发——uni-app框架仿网易云音乐播放器学习心得
目录一.uni-app框架介绍 1.什么是 uni-app 2.为什么要选择uni-app 3.uni-app 统一规范 4.uni-app功能框架二.开发工具与项目创建 1.开发工具 2.项目创 ...

微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）

微信小程序 --- CSS实现仿网易云音乐播放界面效果（黑胶唱片与唱针纯CSS实现）相关推荐

最新文章

热门文章