1. 全栈程序员必看首页

各类加载loading动画效果

全栈程序员-站长 • • 未分类 • 阅读 262

各类加载loading动画效果效果一： 一、HTMLLoading…二、CSS/*绿色背景*/body{   background:#4ea980;   margin:50px;}/*纯白色圈*/.loader{   text-indent:-9999em;   position:relative;   width:200px;   height:20

大家好，又见面了，我是你们的朋友全栈君。

效果一：

 各类加载loading动画效果

一、HTML

<div class=”loader”>Loading…</div>

二、CSS

/*绿色背景*/

body {

   background:#4ea980;
   margin:50px;
}

/*纯白色圈*/
.loader {

   text-indent: -9999em;
   position: relative;
   width: 200px;
   height: 200px;
   box-shadow: inset 0 0 0 15px #FFF;
   border-radius: 50%;
}
.loader::before {

   position: absolute;
   content: ”;
   width: 100px;
   height: 200px;
   background: #4ea980;

   /*半圆*/
   border-radius: 0 200px 200px 0;
   left: 100px;

   /*原点从（0,0）移至圆心处（0,100），绕圆心旋转*/
   transform-origin: 0px 100px;
   animation: load-effect 2s infinite linear;
}

/*最上层（即::before之前）绘制透明白色圆环*/
.loader::after {

   position: absolute;
   content: ”;
   width: 200px;
   height: 200px;
   border-radius: 50%;
   left: 0;
   box-shadow: inset 0 0 0 15px rgba(255,255,255,.2);
}

/*动画：旋转360°*/
@keyframes load-effect {

   0% {

      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {

      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

效果二：

 各类加载loading动画效果

一、HTML

  <div class=”loader”>Loading…</div>
二、CSS

body {

   background:#4ea980;
   margin:50px;
}

.loader {

   text-indent: -9999em;
   position: relative;
   width: 200px;
   height: 200px;
   background: #ffffff;

   /*从左向右0~10%位置纯白，10%~50%纯白~透明*/
   background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0)  50%);
   border-radius: 50%;
   box-shadow:inset 0 0 0 20px rgba(255,255,255,.2);
   -webkit-animation: load-effect 2s infinite linear;
   animation: load-effect 2s infinite linear;
}

各类加载loading动画效果

/*绘制纯白1/4圆*/

.loader::before {

   position: absolute;
   content: ”;
   width: 50%;
   height: 50%;
   background: #FFF;
   border-radius: 100% 0 0 0;

   各类加载loading动画效果
   left:0;
   top:0;
}

 各类加载loading动画效果

/*绘制绿色背景内圆，挡住白色*/
.loader::after  {

   background: #4ea980;
   width: 160px;
   height: 160px;
   border-radius: 50%;
   content: ”;
   position: absolute;
   top: 20px;
   left: 20px;
}

@keyframes load-effect {

   0% {

      transform: rotate(0deg);
   }
   100% {

      transform: rotate(360deg);
   }
}
效果三：

 各类加载loading动画效果

一、HTML

  <div class=”loader”>Loading…</div>
二、CSS

body {

   background:#4ea980;
   margin:150px;
}
.loader {

   font-size: 20px;
   width: 1em;
   height: 1em;
   border-radius: 50%;
   position: relative;
   text-indent: -9999em;
   animation: load-effect 1s infinite linear;
}
@keyframes load-effect {

   0% {

      /*

      -3em:左移3em

       2em:下移2em

       0:模糊距离0，即纯色

       .5em:外扩.5em

       #FFF:白色

      */

      box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   25% {

      box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 -.5em #FFF, 3em 2em 0 0 #FFF;
   }

各类加载loading动画效果
   50% {

      box-shadow: -3em 2em 0 -0.5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 .5em #FFF;
   }

各类加载loading动画效果
   75% {

      box-shadow: -3em 2em 0 0 #FFF, 0 2em 0 .5em #FFF, 3em 2em 0 0 #FFF;
   }

各类加载loading动画效果
   100% {

      box-shadow: -3em 2em 0 .5em #FFF, 0 2em 0 0 #FFF, 3em 2em 0 -.5em #FFF;
   }
}

各类加载loading动画效果

效果四：

 各类加载loading动画效果

一、HTML

  <div class=”loader”>Loading…</div>
二、CSS

body {

   background:#4ea980;
   margin:150px;
}
.loader {

   font-size: 20px;
   width: 1em;
   height: 1em;
   border-radius: 50%;
   text-indent: -9999em;
   animation: load-effect 1s infinite linear;
}

@keyframes load-effect {

   0%{

      box-shadow:

         /*

          0:左移3em

          -3em:下移2em

          0:模糊距离0，即纯色

          .2em:外扩.2em

          #FFF:白色

         */

         0 -3em 0 .2em #FFF,/*上*/

         2em -2em 0 0 #FFF,/*右上*/

         3em 0 0 -.5em #FFF,/*右*/

         2em 2em 0 -.5em #FFF,/*右下*/

         0 3em 0 -.5em #FFF, /*下*/

         -2em 2em 0 -.5em #FFF, /*左下*/

         -3em 0 0 -.5em #FFF, /*左*/

         -2em -2em 0 0 #FFF;/*左上*/
   }

各类加载loading动画效果
   12.5% {

      box-shadow:

         0 -3em 0 0 #FFF,

         2em -2em 0 .2em #FFF,

         3em 0 0 0 #FFF,

         2em 2em 0 -.5em #FFF,

         0 3em 0 -.5em #FFF,

         -2em 2em 0 -.5em #FFF,

         -3em 0 0 -.5em #FFF,

         -2em -2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   25% {

      box-shadow:

         0 -3em 0 -.5em #FFF,

         2em -2em 0 0 #FFF,

         3em 0 0 .2em #FFF,

         2em 2em 0 0 #FFF,

         0 3em 0 -.5em #FFF,

         -2em 2em 0 -.5em #FFF,

         -3em 0 0 -.5em #FFF,

         -2em -2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   37.5% {

      box-shadow:

         0 -3em 0 -.5em #FFF,

         2em -2em 0 -.5em #FFF,

         3em 0 0 0 #FFF,

         2em 2em 0 .2em #FFF,

         0 3em 0 0 #FFF,

         -2em 2em 0 -.5em #FFF,

         -3em 0 0 -.5em #FFF,

         -2em -2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   50% {

      box-shadow:

         0 -3em 0 -.5em #FFF,

         2em -2em 0 -.5em #FFF,

         3em 0 0 -.5em #FFF,

         2em 2em 0 0 #FFF,

         0 3em 0 .2em #FFF,

         -2em 2em 0 0 #FFF,

         -3em 0 0 -.5em #FFF,

         -2em -2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   62.5% {

      box-shadow:

         0 -3em 0 -.5em #FFF,

         2em -2em 0 -.5em #FFF,

         3em 0 0 -.5em #FFF,

         2em 2em 0 -.5em #FFF,

         0 3em 0 0 #FFF,

         -2em 2em 0 .2em #FFF,

         -3em 0 0 0 #FFF,

         -2em -2em 0 -.5em #FFF;
   }

各类加载loading动画效果
   75% {

      box-shadow:

         0 -3em 0 -.5em #FFF,

         2em -2em 0 -.5em #FFF,

         3em 0 0 -.5em #FFF,

         2em 2em 0 -.5em #FFF,

         0 3em 0 -.5em #FFF,

         -2em 2em 0 0 #FFF,

         -3em 0 0 .2em #FFF,

         -2em -2em 0 0 #FFF;
   }

各类加载loading动画效果
   87.5% {

      box-shadow:

         0 -3em 0 0 #FFF,

         2em -2em 0 -.5em #FFF,

         3em 0 0 -.5em #FFF,

         2em 2em 0 -.5em #FFF,

         0 3em 0 -.5em #FFF,

         -2em 2em 0 0 #FFF,

         -3em 0 0 0 #FFF,

         -2em -2em 0 .2em #FFF;
   }

各类加载loading动画效果

   100% {

      box-shadow:

         0 -3em 0 .2em #FFF,

         2em -2em 0 0 #FFF,

         3em 0 0 -.5em #FFF,

         2em 2em 0 -.5em #FFF,

         0 3em 0 -.5em #FFF,

         -2em 2em 0 -.5em #FFF,

         -3em 0 0 -.5em #FFF,

         -2em -2em 0 0 #FFF;
   }
}

各类加载loading动画效果

！100%其实与0%是一样的，即100%返回初始状态

 

 

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。

发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/125035.html原文链接：https://javaforall.net

赞 (0)
0 0

关于作者

全栈程序员-站长的头像

全栈程序员-站长

133.5K 文章
3 粉丝
本网站汇聚当前互联网主流语音，持续更新，欢迎关注公众号“全栈程序员社区”
上一篇 2022年4月19日 下午5:00
下一篇 2022年4月19日 下午5:00


相关推荐

  • pyqt5 pycharm配置_pycharm安装pyqt5

    pyqt5 pycharm配置_pycharm安装pyqt5

    pyqt5 pycharm配置_pycharm安装pyqt5安装Python+PyCharm+PyQt51、安装Python访问官网https://www.python.org/，下载最新版本的Python来安装。我这里下了python3.92、安装PyCharm1)下载PyCharm,官网https://www.jetbrains.com/pycharm/download/#section=windows下载Community版本的2）汉化Pycharm:https://blog.csdn.net/qqwangfan…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年8月27日
    12
  • linux 没有root权限的用户安装GCC[通俗易懂]

    linux 没有root权限的用户安装GCC[通俗易懂]

    linux 没有root权限的用户安装GCC[通俗易懂]在Linux下，如果有root权限的话，使用sudoaptinstall就可以很方便的安装软件，而且同时也会帮你把一些依赖文件也给编译安装好。但是如果不是用的自己的机器，一般情况下是没有root权限的。所以就需要自己动手下载tar文件，解压安装。在安装中遇到的最大的问题是依赖的问题。手动下载编译GCC，首先下载tar文件，可以在这里下载https://ftp.gnu.org/gnu/gc…

    全栈程序员-站长的头像 全栈程序员-站长
    2022年5月26日
    38
  • VirtualBox安装Windows XP

    VirtualBox安装Windows XP

    VirtualBox安装Windows XP本文记录在 VirtualBox 上安装 WidowsXP 的过程

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月19日
    2
  • 操作系统复习题最全(复习看它就够了!!!!!

    操作系统复习题最全(复习看它就够了!!!!!

    操作系统复习题最全(复习看它就够了!!!!!PTA 习题总结 非常主观的针对了当时我个人的情况 习题一

    全栈程序员-站长的头像 全栈程序员-站长
    2026年3月18日
    2
  • c#窗体怎么居中_窗口居中

    c#窗体怎么居中_窗口居中

    c#窗体怎么居中_窗口居中窗体始终居桌面中央显示,需要考虑以下两个方面:(1).窗体距离桌面左部边缘与桌面的宽度以及自身宽度的判断;(2).窗体距离桌面上边缘与桌面的高度以及自身高度的判断下面用代码一一实现,当然这都是在窗体加载时完成this.Left=Screen.PrimaryScreen.Bounds.Width/2-this.Width/2;//桌面的宽度的一半减去自身宽的的一半this…….

    全栈程序员-站长的头像 全栈程序员-站长
    2025年10月14日
    7
  • ARM9开发之学习过程总结[通俗易懂]

    ARM9开发之学习过程总结[通俗易懂]

    ARM9开发之学习过程总结[通俗易懂]时至今日，与心爱的TQ2440相伴已有一年，从当初的一无所知到今天的得心应手，其间经历的种种，实在难以言表。这里先将我学习ARM中的整个过程总结一下，希望对刚接触的朋友有个提示作用，也希望高手不吝赐教，欢迎拍砖^_^。需要说明的是，这仅仅说是ARM，其间涉及到别的知识也是需要很多时间去学习的，这里我就不列举了。开发板的配套光盘有很多资料文档，在学习之前，大概浏览一下是非常不错的，强烈建议，特别是S3

    全栈程序员-站长的头像 全栈程序员-站长
    2022年6月10日
    57

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号