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

更新日期: 2019-12-09阅读: 3.9k标签: 特效

今天收听网易云音乐时看到孤独星球的特效,于是就顺手搬到这里了。孤独星球特效本身没有什么难点,但如果要加入音轨控制星球运动频率就有点麻烦了,后面我会专门开一篇文章讲解如何使用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);
}
}


知识点提炼

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

链接: https://fly63.com/article/detial/6790

也许vue+css3做交互特效更简单

关于vue+css3开发的特效,以及和javascript+css3的对比,就说到这里了,希望这三个小实例,能帮到大家了解下应该怎么使用vue+css3开发特效的。

纯 CSS 创作出平滑的层叠海浪特效

这里的波浪只是侧面的,利用几个平面一部分弧旋转得到。定义 dom,容器中包含一行文本和3条做海浪特效的 <span>,设置容器,文字样式,制作海浪动画效果

js实现图片放大镜特效

在平时网上商城购物时,我们能够通过放大镜效果来使我们看图片能够更加的清楚,今天我就来给大家分享一下我学习的放大镜特效

基于 HTML5 Canvas 实现的文字动画特效

文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态的效果来提醒用户阅读

只需三步,实时多边形折射

在本教程中,您将学习如何使用Three.js在三个步骤中使对象看起来像玻璃。渲染3D对象时,无论使用某种3D软件还是使用WebGL进行实时显示,始终都必须为其分配材料以使其可见并具有所需的外观。

原生JS实现旋转木马轮播图特效

当用户点击左右箭头时,让数组进行相应变化(如果点击右箭头,就删除数组最后那个元素,把它添加到最前边;如果点击左箭头,就删除数组最前边那个元素,把它添加到最后边),改变完数组再调用一下move()函数(让图片轮播)

纯css3实现二维码扫描特效

第一步,实现网格背景:第二部实现扫码线以及渐变背景特效,四角特效就是四个宽高相等的正方形,分别设置边框即可。设置扫描动画

canvas+js实现数字雨特效【字符下落特效】

用dropLine这个列表来记录绘制过程,dropLine[i]的意义是表示在第i列,第dropLine[i]行绘制!filltext()是canvas中的方法,这里的三个参数分别对应:内容,横坐标,纵坐标。

纯js时钟特效

电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择。学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础。

css按钮悬停特效

本文给大家介绍几款按钮的鼠标悬停效果,是纯CSS实现的,鼠标移上按钮后,按钮会随之发生变化。这种效果使用非常广泛,非常多的网页都用上了这个效果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!