摘要 今天小编跟大家讲解下有关纯CSS3仿网易云孤独星球特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3仿网易云孤独星

今天小编跟大家讲解下有关纯CSS3仿网易云孤独星球特效 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关纯CSS3仿网易云孤独星球特效 的相关资料，希望小伙伴们看了有所帮助。

今天收听网易云音乐时看到孤独星球的特效 于是就顺手搬到这里了。孤独星球特效本身没有什么难点 但如果要加入音轨控制星球运动频率就有点麻烦了 后面我会专门开一篇文章讲解如何使用js去解析mp3的音轨并制作动画特效 这里呢就稍微简单点了 既然是纯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);}}前端代码

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>

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);}}知识点提炼

1、这里一共设置了4个div 用来做外围的星球旋转效果 我们通过animation-delay均匀分散开4个div的动画执行时间 达到循环往复的效果。

2、旋转星球是用:after伪元素制作的 每次设置为div顶部中间位置 这样能保证星球旋转一直处于圆周轨迹上 这里你可以思考一下 如果起始位置不在顶部 这个css该怎么写

3、某些浏览器在设置了border-radius的情况下 border依然显示为方框 这种情况可以使用box-shadow去模拟border 你可以亲手尝试一下。

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

原文来自：张阳君的个人网站地址 https://www.zhangyangjun.com/post/dynamic-effect-cloud-music-planet.html

来源：爱蒂网