zoukankan      html  css  js  c++  java
  • 10.纯 CSS 创作一个同心圆弧旋转 loader 特效

    原文地址:https://segmentfault.com/a/1190000014682999

    想到了扇形:正方形 -》border-radius: 50%; -》取四份中的任意一份。 

    不过如何取任意相关圆心角的扇形呢?

    HTML代码:

    <div class="circle"></div>

    CSS代码:

    html, body,.circle {
        margin: 0;
        padding: 0;
        height: 100%;
        display:flex;
        justify-content: center;
        align-items: center;
        
    }
    
    /* 优化代码 减少代码重复 */
    .circle,
    .circle::before,
    .circle::after {
        border-width: 0.4em;
        border-style: solid;
        border-radius: 50%;
        /* 使左右透明 ,只剩上下弧  如何任意该弧所占圆心角呢? */
        border-left-color: transparent;
        border-right-color: transparent;
        /* 动画名称 周期 节奏 循环次数 是否反向播放 */
        animation: animate 4s ease-in-out infinite alternate;
    }
    .circle{
        width:10em;
        height: 10em;
        border-top-color: red;
        border-bottom-color: blue;
        font-size: 20px;
        /* 定位会让其分离 */
        position: relative; 
        
    }
    .circle::before,
    .circle::after {
        content: '';
        position: absolute;
    }
    .circle::before {
        width: 70%;
        height: 70%;
        border-top-color: orange;
        border-bottom-color: cyan;
        animation-duration: 8s;
    }
    .circle::after {
        width: 40%;
        height: 40%;
        border-top-color: yellow;
        border-bottom-color: limegreen;
        animation-duration: 16s;
    }
    @keyframes animate {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(1440deg);
        }
    }
  • 相关阅读:
    坑爹的微信支付v3,其实没有那么坑
    Mysql探究之null与not null
    Mysql的空值与NULL的区别
    Java编程思想(第4版) 中文清晰PDF完整版
    URI和URL的区别
    html 文本输入框效果大汇集
    HTTP状态码大全
    Silverlight ModelView中调用UI进程
    appium部分api
    appium元素定位
  • 原文地址:https://www.cnblogs.com/FlyingLiao/p/10136377.html
Copyright © 2011-2022 走看看