zoukankan      html  css  js  c++  java
  • svg+css圆环动效

    使用 svg + css 制作圆环loading动效

    转载自:https://www.jianshu.com/p/62696f058463

    html
    <svg class="load" viewBox="25 25 50 50">
        <circle class="loading" cx="50" cy="50" r="20" fill="none" />
    </svg>
    
    css
    .load {
         80px;
        height: 80px;
    }
    .loading {
        stroke: rgb(53, 157, 218);
        stroke- 5;
        stroke-linecap: round;
        fill: none;
    }
    
    /** 主动画 **/
    @keyframes dash {
        0% {
            stroke-dasharray: 0, 200;
            stroke-dashoffset: 0;
        }
        20% {
            stroke-dasharray: 0, 200;
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dasharray: 130, 200;
            stroke-dashoffset: -120;
        }
    }
    
    .loading {
        stroke: rgb(53, 157, 218);
        stroke- 5;
        fill: none;
        -webkit-animation: dash 1.5s linear infinite;
        -o-animation: dash 1.5s linear infinite;
        animation: dash 1.5s linear infinite;
    }
    
    /** 旋转动画 **/
    @keyframes rotate {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    .load {
        animation: rotate 2s linear infinite;
    }
    
  • 相关阅读:
    周末总结
    大数据开源框架技术汇总
    oracle迁移mysql总结
    梯度下降
    BFC的概念
    元素类型
    window10安装tensorflow
    学习使用git
    设计模式中的关系
    拟合圆
  • 原文地址:https://www.cnblogs.com/CreateBox/p/15196450.html
Copyright © 2011-2022 走看看