怎么用CSS3实现网易云孤独星球特效

发布时间:2022-03-03 17:52:21 作者:iii
来源:亿速云 阅读:179

这篇“怎么用CSS3实现网易云孤独星球特效”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“怎么用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);

  }

  }

  知识点提炼

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

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

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

以上就是关于“怎么用CSS3实现网易云孤独星球特效”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

推荐阅读:
  1. 怎么用CSS3实现全景图特效
  2. 怎么用CSS3 loading实现预加载动画特效

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css3

上一篇:HTML5怎么实现动态文字遮罩背景特效

下一篇:上中下结构DIV CSS布局的方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》