zoukankan      html  css  js  c++  java
  • 2.纯 CSS 创作一个矩形旋转 loader 特效

    原文地址2.纯 CSS 创作一个矩形旋转 loader 特效

    扩展后地址:https://scrimba.com/c/cNJVWUR 

    扩展地址:https://codepen.io/pen/

    HTML代码:

    <div class="loader">
          <span></span>
          <span></span>
          <span></span>
     </div>

    CSS代码:

    /* 居中显示 */
    html, body {
        margin: 0;
        padding: 0;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;
    }
    /* 设置容器的尺寸: */
    .loader {
        width: 150px;
        height: 150px;
        position: relative;
    }
    /* 设置矩形的边框样式 */
    .loader span {
        position: absolute;
        box-sizing: border-box;
        
        border-radius: 50%;
        
    }
    /* 设置 3 个矩形的尺寸: */
    .loader span:nth-child(1) {
        border: 5px solid red;
        width: 100%;
        height: 100%;
    }
    .loader span:nth-child(2) {
        border: 5px solid green;
        width: 70%;
        height: 70%;
        margin: 15%;
    }
    .loader span:nth-child(3) {
        border: 5px solid blue;
        width: 40%;
        height: 40%;
        margin: 30%;
    }
    /* 定义动画效果:*/
    @keyframes rotating1 {
        from {
            transform: rotateY(0deg);
        }
    
        to {
            transform: rotateY(360deg);
        }
    }
    /* 把动画应用到 3 个矩形上:*/
    .loader span:nth-child(1) {
        animation: rotating1 linear infinite;
        animation-duration: 4s;
    }
    /* 定义动画效果:*/
    @keyframes rotating2 {
        from {
            transform: rotateX(0deg);
            transform-origin:center center;
        }
    
        to {
            transform: rotateX(360deg);
        }
    }
    /* 把动画应用到 3 个矩形上:*/
    .loader span:nth-child(2) {
        animation: rotating2 linear infinite;
        animation-duration: 4s;
    }
    /* 定义动画效果:这里无效  需补充*/
    @keyframes rotating3 {
        from {
            skew(0deg,0deg);
        }
        to {
            skew(360deg,360deg);
        }
    }
    /* 把动画应用到 3 个矩形上:*/
    .loader span:nth-child(3) {
        animation: rotating3 linear infinite;
        animation-duration: 4s;
    }
  • 相关阅读:
    [声明]博主退役了
    galgame(s?)
    atcoder grand contest 040 F Two Pieces
    AtCoder Grand Contest 040 E
    【AtCoder】CODE FESTIVAL 2016 qual C E-順列辞書 / Encyclopedia of Permutations
    GMOJ6282 向量
    [GMOJ6281] 串
    GMOJ 5909 跑商
    2019.10.28 GMOJ 6394 燃烧的火焰
    题解 CF1092B 【Teams Forming】
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10088015.html
Copyright © 2011-2022 走看看