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

这篇“怎么用CSS3实现网易云孤独星球特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“怎么用CSS3实现网易云孤独星球特效”文章吧。
　　HTML代码：
　　
　　
　　
　　
　　
　　
　　
　　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-bo免费云主机域名rder-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实现网易云孤独星球特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注百云主机行业资讯频道。

相关推荐: CSS中的基础选择器有哪些

本篇内容介绍了“CSS中的基础选择器有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！CSS（层叠样式表）是一种用于页面内渲染 HTML，XML 等的一种基础…