纯CSS3仿网易云孤独星球特效

独星球特效本身没有什么难点，但如果要加入音轨控制星球运动频率就有点麻烦了，后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效，这里呢就稍微简单点了，既然是纯CSS3，星球运动频率就设为固定的好了。

HTML代码：

<div id="effect-music"><div class="image"></div><div class="wave"></div><div class="wave"></div><div class="wave"></div><div class="wave"></div>
</div>
web前端开发学习Q-q-u-n： 731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

CSS3代码

#effect-music {position: relative;margin: auto;width: 100%;height: 400px;overflow: hidden;
}#effect-music > .image {position: absolute;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 200px;height: 200px;background: url(https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575820971101&di=935fabf797c3b30f45f7ed90666f9399&imgtype=0&src=http%3A%2F%2Fimglf1.ph.126.net%2FJceVstVIHMeAlbMvdbYwlA%3D%3D%2F2456713596830921578.jpg);background-size: cover;background-position: center center;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;animation: rotate 10s linear 0s infinite;-webkit-animation: rotate 10s linear 0s infinite;
}#effect-music > .wave {position: absolute;opacity: 0;left: 0;right: 0;top: 0;bottom: 0;margin: auto;width: 204px;height: 204px;border-radius: 50%;border: 2px solid #eee;animation: wave 4s linear 0s infinite;-webkit-animation: wave 4s linear 0s infinite;
}#effect-music > .wave::after {content: "";position: absolute;top: -4px;left: 50%;width: 6px;height: 6px;overflow: hidden;border-radius: 5px;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;background-color: #ccc;
}#effect-music > .wave:nth-child(2) {animation-delay: 1s;
}#effect-music > .wave:nth-child(3) {animation-delay: 2s;
}#effect-music > .wave:nth-child(4) {animation-delay: 3s;
}@keyframes rotate {from {transform: rotate(0deg);-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);}to {transform: rotate(360deg);-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);}
}@keyframes wave {from {opacity: 1;transform: rotate(0deg) scale(1);-webkit-transform: rotate(0deg) scale(1);-moz-transform: rotate(0deg) scale(1);-ms-transform: rotate(0deg) scale(1);-o-transform: rotate(0deg) scale(1);}to {opacity: 0;transform: rotate(-300deg) scale(2.2);-webkit-transform: rotate(-300deg) scale(2.2);-moz-transform: rotate(-300deg) scale(2.2);-ms-transform: rotate(-300deg) scale(2.2);-o-transform: rotate(-300deg) scale(2.2);
}
}

知识点提炼

这里一共设置了4个div，用来做外围的星球旋转效果，我们通过animation-delay均匀分散开4个div的动画执行时间，达到循环往复的效果。
旋转星球是用:after伪元素制作的，每次设置为div顶部中间位置，这样能保证星球旋转一直处于圆周轨迹上，这里你可以思考一下，如果起始位置不在顶部，这个CSS该怎么写？
某些浏览器在设置了border-radius的情况下，border依然显示为方框，这种情况可以使用box-shadow去模拟border，你可以亲手尝试一下。

最后说一句，孤独星球这个动效听着音乐看比较带感（因为版权问题，这里没有放web音乐），但这个动画是写死频率的，快歌慢歌都是一个节奏，若要让动画跟随音乐联动，我们需要用js解析mp3的音轨，后面会有文章补上，敬请期待！

纯CSS3仿网易云孤独星球特效相关推荐

用HTML+CSS仿网易云音乐网站(6个页面)_实训素材
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 音乐网页设计 | 仿网易云音乐 | 各大音乐官网网页 | 明星 ...
仿网易云音乐（微信小程序版）
项目部分截图(Gif) 前言前一阵子学习了微信小程序,为了巩固所学的知识和提高实战经验,决定自己手撸一款小程序.因为听歌一直在用网易云音乐,所以突发奇想就做一款仿网易云音乐的小程序吧!开发中遇到了很 ...
仿网易云官网轮播图 html+css+js
效果: 可自动轮播,左右箭头按钮和下方小圆点可切图,鼠标移入时停止自动轮播. 视频演示: [html+css+js]仿网易云轮播图实现(后面有完整源码): 1. 定义标签,看注释: <!-- ...
仿网易云音乐源码html5
HTML5仿网易云音乐播放器特效源码是一款仿网易云音乐外链播放器UI的HTML5 APlayer音乐播放器插件的代码.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是 ...
仿网易云音乐播放列表、皮肤样式、歌词滚动、轮播图等
前言: 今天是我第二次写博客,打算把以前做过的一些小东西记录下来,今天介绍的是我的毕业设计<小罡音乐>是简仿网易云播放器的一些界面和播放音乐功能. 是基于ASP.NET的小罡音乐的设计与实 ...
Vue2仿网易云风格音乐播放器（附源码）
Vue2仿网易云风格音乐播放器 1.整体效果 2.使用技术 3.实现内容 4.源码 5.使用图片 1.整体效果 2.使用技术使用了HTML5 + CSS3进行页面布局及美化使用Vue2进行数据渲染 ...
WPF仿网易云音乐系列（一、左侧菜单栏：Expander+RadioButton）
WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 原文:WPF仿网易云音乐系列(一.左侧菜单栏:Expander+RadioButton) 1.简介上一篇咱们说到, ...
汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效
这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效.该特效共有9种不同的按钮变形动画效果,这些效果都是使用CSS3帧动画完成的,效果非常的酷. 制作方法 HTML结构该按钮变形动画使用嵌套的H ...
仿网易云PC端项目-vue
项目GitHub地址: wangyiMusicPlayer. wangyiMusicPlayer--这是一个仿网易云PC端的的项目(vue) 项目简介: 本项目使用的后端接口{接口文档已放在项目中,自 ...

纯CSS3仿网易云孤独星球特效

知识点提炼

纯CSS3仿网易云孤独星球特效相关推荐

最新文章

热门文章