纯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>

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);
}
}

资源搜索网站大全https://55wd.com 广州品牌设计公司http://www.maiqicn.com

知识点提炼

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

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

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

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