17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

最新推荐文章于 2022-05-05 10:06:42 发布

anfuye3276

最新推荐文章于 2022-05-05 10:06:42 发布

阅读量286

点赞数

原文链接：http://www.cnblogs.com/FlyingLiao/p/10243747.html

版权

17.1拓展之纯 CSS 创作炫酷的同心圆旋转动画

效果地址：https://codepen.io/flyingliao/pen/ebjEMm?editors=1100

HTML代码：

<div class="loader">
   <div class="one">
     <div class="two">
       <div class="thre">
         <div class="four">
           <div class="five"></div>
         </div>
       </div>
     </div>
  </div>
</div>

CSS代码：

html,
body,
.loader {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
div{
  border: 10px solid white;
  border-radius: 50%;
  margin: 10px;
}
.loader {
    width: 10em;
    height: 10em;
    position: relative;
    font-size: 24px;
}
.loader div {
    background-color: rgba(100%, 0%, 0%, 0.3);
    border-color: white rgba(100%, 100%, 100%, 0.2);
    /* 名称 周期 速度 次数 是否反向播放 */
    animation: animate 5s linear infinite normal;
}
@keyframes animate {
    0% {
        /* red */
        background-color: rgba(100%, 0%, 0%, 0.3);
        transform: rotate(0deg);
    }
    25% {
        /* yellow */
        background-color: rgba(100%, 100%, 0%, 0.3);
    }
    50% {
        /* green */
        background-color: rgba(0%, 100%, 0%, 0.3);
    }
    75% {
        /* blue */
        background-color: rgba(0%, 0%, 100%, 0.3);
    }
    100% {
        /* purple */
        background-color: rgba(100%, 0%, 100%, 0.3);
        transform: rotate(720deg);
    }
}