您现在的位置是：网站首页> 编程资料编程资料

CSS3实现大小不一的粒子旋转加载动画CSS3绘制超炫的上下起伏波动进度加载动画使用Loader.css和css-spinners来制作加载动画的方法一款利用纯css3实现的win8加载动画的实例分析使用css3实现的windows8开机加载动画实例教程 纯CSS3打造非常炫的加载动画效果一款纯css3实现的动画加载导航使用css3实现超炫的loading加载动画效果通过css加载远程字体示例代码css 样式加载的优先级使用经验分享css外部样式加载Link与import的区别

2023-10-22 312人已围观

简介 这篇文章主要介绍了CSS3实现大小不一的粒子旋转加载动画的相关资料，像是不断产生的气泡，显示加载进度，感兴趣的小伙伴们可以参考一下

先看看效果图，像是气泡在上升：

CSS Code复制内容到剪贴板
  1. #load3,     
  2. #loader3 {     
  3.  font-size: 20px;     
  4.  margin: 80px 50px;     
  5.  float: left;     
  6.  width: 1em;     
  7.  height: 1em;     
  8.  border-radius: 50%;     
  9.  position: relative;     
  10.  text-indent: -9999em;     
  11.  -webkit-animation: load3 1.3s infinite linear;     
  12.  animation: load3 1.3s infinite linear;     
  13. }     
  14. @-webkit-keyframes load3 {     
  15.    0%,     
  16.    100% {     
  17.      box-shadow: 0em -3em 0 0.2em #aaff00, 2em -2em 0 0em #aaff00,     
  18.                  3em 0 0 -0.5em #aaff00, 2em 2em 0 -0.5em #aaff00,     
  19.                  0em 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  20.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 0em #aaff00;     
  21.    }     
  22.    12.5% {     
  23.      box-shadow: 0 -3em 0 0 #aaff00, 2em -2em 0 0.2em #aaff00,     
  24.                  3em 0 0 0 #aaff00, 2em 2em 0 -0.5em #aaff00,     
  25.                  0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  26.                  -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  27.    }     
  28.    25% {     
  29.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 0em #aaff00,     
  30.                   3em 0 0 0.2em #aaff00, 2em 2em 0 0 #aaff00,     
  31.                   0 3em 0 -0.5em #aaff00, -2em 2em 0 -0.5em #aaff00,     
  32.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  33.    }     
  34.    37.5% {     
  35.        box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  36.                    3em 0 0 0 #aaff00, 2em 2em 0 0.2em #aaff00,     
  37.                    0 3em 0 0 #aaff00, -2em 2em 0 -0.5em #aaff00,     
  38.                    -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  39.   }     
  40.   50% {     
  41.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  42.                   3em 0 0 -0.5em #aaff00, 2em 2em 0 0 #aaff00,     
  43.                   0 3em 0 0.2em #aaff00, -2em 2em 0 0 #aaff00,     
  44.                   -3em 0 0 -0.5em #aaff00, -2em -2em 0 -0.5em #aaff00;     
  45.   }     
  46.   62.5% {     
  47.       box-shadow: 0 -3em 0 -0.5em #aaff00, 2em -2em 0 -0.5em #aaff00,     
  48.                   3em 0 0 -0.5em #aaff00提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：全民斗三国兵种有哪些_全民斗三国兵种相克问题介绍_手机游戏_游戏攻略_

    下一篇：自适应屏幕的CSS响应式布局设计技巧总结

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网