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

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

前言

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


代码

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://tvax1.sinaimg.cn/crop.0.280.720.720.180/cf2922d4ly1g4r5m8upm6j20k00zkqt7.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></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

 

文章链接:https://www.haah.net/archives/1367.html
文章标题:纯css写网易云孤独星球动画
文章版权:辉哥博客 (haah.net) 所发布的内容,部分为原创文章,转载请注明来源,网络转载文章如有侵权请联系我们!

为TA充电
共{{data.count}}人
人已赞赏
技术文档网站教程

使用宝塔面板搭建OLAINDEX-Magic魔改版,支持多账户绑定

2020-4-15 12:19:34

技术文档网络教程

GitHub 学生开发工具包申请 – 认证方式:校园邮箱,学生证等

2020-4-18 0:03:38

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索