用纯CSS实现加载中动画效果

矫情吗；* 2022-03-31 12:19 591阅读 0赞

HTML

<div class="pswp__preloader__icn">
      <div class="pswp__preloader__cut">
        <div class="pswp__preloader__donut"></div>
      </div>
    </div>

CSS

.pswp__preloader__icn {
      opacity:0.75;
      width: 24px;
      height: 24px;
      -webkit-animation: clockwise 500ms linear infinite;
      animation: clockwise 500ms linear infinite;
    }
     
    /* The idea of animating inner circle is based on Polymer loading indicator by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html */
    .pswp__preloader__cut {
      position: relative;
      width: 12px;
      height: 24px;
      overflow: hidden;
      position: absolute;
      top: 0;
      left: 0;
    }
     
    .pswp__preloader__donut {
      box-sizing: border-box;
      width: 24px;
      height: 24px;
      border: 2px solid #000;
       border-radius: 50%;
      border-left-color: transparent;
      border-bottom-color: transparent;
      position: absolute;
      top: 0;
      left: 0;
      background: none;
      margin:0;
       -webkit-animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
      animation: donut-rotate 1000ms cubic-bezier(.4,0,.22,1) infinite;
    }
     
    @-webkit-keyframes clockwise {
      0% { -webkit-transform: rotate(0deg) }
      100% { -webkit-transform: rotate(360deg) }
    }
    @keyframes clockwise {
      0% { transform: rotate(0deg) }
      100% { transform: rotate(360deg) }
    }
    @-webkit-keyframes donut-rotate {
      0% { -webkit-transform: rotate(0) }
      50% { -webkit-transform: rotate(-140deg) }
      100% { -webkit-transform: rotate(0) }
    }
    @keyframes donut-rotate {
      0% { transform: rotate(0) }
      50% { transform: rotate(-140deg) }
      100% { transform: rotate(0) }
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，591人围观）

还没有评论，来说两句吧...

相关阅读

相关 156.CSS波浪加载器动画效果

效果 (源码网盘地址在最后) ![6be2e9939061c980170d4a2da1ab4390.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来一

超、凢脫俗/ 2023年01月21日 03:29/ 0 赞/ 230 阅读

相关 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

目录 1 视频 2 知识点 2.1 CSS calc() 函数 2.2 CSS var() 函数 2.3 CSS3 box-shadow 属性 2.4 CSS3 b

素颜马尾好姑娘i/ 2022年12月31日 02:25/ 0 赞/ 268 阅读

相关 157.纯CSS波浪段动画效果

效果 (源码网盘地址在最后) ![f3d695ff68925bc138926eb7029a8685.gif][] 最近开源了一个 Vue 组件，还不够完善，欢迎大家来

水深无声/ 2022年10月20日 13:58/ 0 赞/ 271 阅读

相关纯css3 checkbox选中动画效果

[下载地址][Link 1]checkbox选中的动画特效，使用纯css3代码实现的checkbox复选框勾选的翻转动画效果。 ![1630545811.png][] dd

深碍√TFBOYSˉ_/ 2022年09月09日 15:48/ 0 赞/ 240 阅读

相关 css加载中动画效果

[转载自大佬][Link 1] 效果一: ![在这里插入图片描述][88253320a6ab4a489d6b1317add231e5.png] html代码：

r囧r小猫/ 2022年09月07日 12:27/ 0 赞/ 237 阅读

相关 Android中的加载动画效果

> 在布局中加入一个ImageView控件，为其设置动画效果 -------------------- 淡入淡出 AnimationSet animatio

末蓝、/ 2022年08月18日 11:57/ 0 赞/ 250 阅读

相关纯CSS实现SVG路径描边动画效果

SVG中有一个比较重要度属性，stroke。stroke有很多兄弟属性： 1）stroke：线的颜色； 2）stroke-width：线的宽度； 3）stroke-lin

秒速五厘米/ 2022年06月05日 02:18/ 0 赞/ 364 阅读

相关 css实现加载动画

css实现加载动画 / Usage: <div class="sk-spinner sk-spinner-rotating-plane"></div> /

不念不忘少年蓝@/ 2022年06月01日 11:54/ 0 赞/ 344 阅读

相关用纯CSS实现加载中动画效果

HTML <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut">

矫情吗；*/ 2022年03月31日 12:19/ 0 赞/ 592 阅读

相关 CSS3实现的图片加载动画效果

日期：2013-7-16 来源：[GBin1.com][] ![CSS3实现的图片加载动画效果][CSS3] [在线演示 ][Link 1] 使用C

清疚/ 2022年01月06日 07:11/ 0 赞/ 331 阅读