纯css写网易云孤独星球动画


前两天听歌的时候发现网易云的孤独星球动画挺好看,本想着在网上找找思路,谁知道直接就有,哈哈
效果图(动态的,没找到动态工具,拿截图凑合看吧):
网易云孤独星球效果.png

源代码

css:

#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: 150px;
  height: 150px;
  background: url(https://cdn.u1.huluxia.com/g3/M01/2D/DB/wKgBOV6U0JyADz04AANNakBmm1c209.png);
  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>

Github地址

声明:文生技术博客|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - 纯css写网易云孤独星球动画


做个俗人,贪财好色。