【CSS练习】如何用纯 CSS 创作一个矩形旋转 loader 特效

image.png

【知识点】

1. box-sizing
   定义了 user agent 应该如何计算一个元素的总宽度和总高度。可以更改用于计算元素宽度和高度的默认的 CSS 盒子模型。可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为。

• content-box
  默认值，标准盒子模型。 width 与 height 只包括内容的宽和高， 不包括边框（border），内边距（padding），外边距（margin）。
• border-box
  width 和 height 属性包括内容，内边距和边框，但不包括外边距。这是当文档处于 Quirks模式 时Internet Explorer使用的盒模型。
• padding-box

2. @keyframes
   产生名为rotating的动画效果,加入infinite关键字，可以让动画无限次播放
   animation: rotating linear infinite;
   定义动画效果
   animation-name: rotating;
   animation-timing-function: linear;

0%可以用from代表，100%可以用to代表

@keyframes rotating {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }
}

3. z-index
   sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
   大值覆盖小值

#loader span:nth-child(1) {
        width: 100%;
        height: 100%;
        z-index: 3;
        animation-duration:4s;
    }
    #loader span:nth-child(2) {
        width: 70%;
        height: 70%;
        margin: 15%;
        z-index: 2;
        animation-duration:2s;
    }
    #loader span:nth-child(3) {
        width: 40%;
        height: 40%;
        margin: 30%;
        z-index: 1;
        animation-duration:1s;
    }

代码

<style type="text/css">
    html, body{
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    #loader {
        width: 150px;
        height: 150px;
        position: relative;
    }
    #loader span {
        position: absolute;
        border: 10px solid dimgray;
        border-radius: 2px;
        box-sizing: border-box;
        animation: rotating linear infinite;
    }
    #loader span:nth-child(1) {
        width: 100%;
        height: 100%;
        z-index: 3;
        animation-duration:4s;
    }
    #loader span:nth-child(2) {
        width: 70%;
        height: 70%;
        margin: 15%;
        z-index: 2;
        animation-duration:2s;
    }
    #loader span:nth-child(3) {
        width: 40%;
        height: 40%;
        margin: 30%;
        z-index: 1;
        animation-duration:1s;
    }
    #loader span::before, 
    #loader span::after{
        content: '';
        position: absolute;
        width: 10px;
        height: 50%;
        background-color: gold;
    }
    #loader span::before{
        top: -10px;
        left: -10px;
    }
    #loader span::after{
        bottom: -10px;
        right: -10px;
    }
    @keyframes rotating {
        from {
            transform: rotateY(0deg);
        }
        to {
            transform: rotateY(360deg);
        }
    }


    </style>

参考：https://segmentfault.com/a/1190000014675969