脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > css3 >

CSS3实现粒子旋转伸缩加载动画

  发布时间：2016-04-22 14:28:19   作者：佚名   我要评论
这篇文章主要为大家详细介绍了CSS3实现粒子旋转伸缩加载动画的相关代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文运用CSS3的旋转Transform属性和动画的执行百分比制作而成，很特别的CSS3实现粒子旋转伸缩加载动画，具体内容如下
 

CSS Code复制内容到剪贴板
  1. #loader6 {     
  2.   margin: 60px 50px;     
  3.   float: left;     
  4.   font-size: 90px;     
  5.   text-indent: -9999em;     
  6.   overflow: hidden;     
  7.   width: 1em;     
  8.   height: 1em;     
  9.   border-radius: 50%;     
  10.   position: relative;     
  11.   -webkit-animation: load6 1.7s infinite ease;     
  12.   animation: load6 1.7s infinite ease;     
  13.  }     
  14.  @-webkit-keyframes load6 {     
  15.     0% {     
  16.       -webkit-transform: rotate(0deg);     
  17.       transform: rotate(0deg);     
  18.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  19.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  20.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  21.       }     
  22.     5%,     
  23.     95% {     
  24.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  25.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  26.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  27.     }     
  28.     30% {     
  29.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
  30.                   -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
  31.                   -0.81em 0.21em 0 -0.477em #ff0000;     
  32.     }     
  33.     55% {     
  34.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
  35.                   -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
  36.                   -0.57em -0.61em 0 -0.477em #ff0000;     
  37.     }     
  38.     100% {     
  39.       -webkit-transform: rotate(360deg);     
  40.       transform: rotate(360deg);     
  41.       box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  42.                   -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  43.                   -0.11em -0.83em 0 -0.477em #ff0000;     
  44.     }     
  45.  }     
  46. @keyframes load6 {     
  47.   0% {     
  48.     -webkit-transform: rotate(0deg);     
  49.     transform: rotate(0deg);     
  50.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  51.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  52.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  53.     }     
  54.   5%,     
  55.   95% {     
  56.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  57.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  58.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  59.   }     
  60.   30% {     
  61.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.51em -0.66em 0 -0.42em #ff0000,     
  62.                 -0.75em -0.36em 0 -0.44em #ff0000, -0.83em -0.03em 0 -0.46em #ff0000,     
  63.                 -0.81em 0.21em 0 -0.477em #ff0000;     
  64.   }     
  65.   55% {     
  66.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.29em -0.78em 0 -0.42em #ff0000,     
  67.                 -0.43em -0.72em 0 -0.44em #ff0000, -0.52em -0.65em 0 -0.46em #ff0000,     
  68.                 -0.57em -0.61em 0 -0.477em #ff0000;     
  69.   }     
  70.   100% {     
  71.     -webkit-transform: rotate(360deg);     
  72.     transform: rotate(360deg);     
  73.     box-shadow: -0.11em -0.83em 0 -0.4em #ff0000, -0.11em -0.83em 0 -0.42em #ff0000,     
  74.                 -0.11em -0.83em 0 -0.44em #ff0000, -0.11em -0.83em 0 -0.46em #ff0000,     
  75.                 -0.11em -0.83em 0 -0.477em #ff0000;     
  76.   }     
  77. }     

以上就是本文的全部内容，希望对大家学习CSS样式编写有所帮助，制作出更多精彩的加载动画效果。 

相关文章

  • CSS控制前端图片HTTP请求的各种情况示例

    Web前端图片加载的方式多种多样,其所产生的HTTP请求也各异,这里我们就来列举CSS控制前端图片HTTP请求的各种情况示例,需要的朋友可以参考下
    2016-06-16

  • css全屏背景图片设置,django加载图片路径详解

    下面小编就为大家带来一篇css全屏背景图片设置,django加载图片路径详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-01

  • 纯CSS3实现的绿色Loading加载动画特效源码

    这是一款由纯CSS3实现的绿色Loading加载动画特效源码，有多种loading样式供用户选择，采用纯css3实现，没有引入任何外部图形元素
    2016-05-27

  • jQuery+css3实现的点击下载按钮3D加载downlading进度特效源码

    是一段点击下载按钮后，当前下载图标将进行3D翻转，随后在翻转后的图标中进行downlading进度加载动画效果代码，本段代码适应于所有网页使用，有需要的朋友们可以前来下载使
    2016-05-09

  • CSS实现弹簧效果的旋转加载动画

    这篇文章主要介绍了CSS实现弹簧效果的旋转加载动画的相关资料，像是弹簧在不断伸缩，显示加载进度，感兴趣的小伙伴们可以参考一下
    2016-04-25

  • CSS实现大小相同、颜色深浅不一的粒子旋转加载动画

    这篇文章主要介绍了CSS实现大小相同、颜色深浅不一的粒子旋转加载动画的相关代码，运用CSS3的border-radius圆角属性、box-shadow阴影属性等属性制作出来的，感兴趣的小伙伴
    2016-04-25

  • CSS实现圆环旋转加载动画

    这篇文章主要介绍了CSS实现圆环旋转加载动画，一个圆环表示加载进度，像一个时钟顺时针旋转一圈，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-25

  • CSS实现横向粒子变动加载动画

    这篇文章主要介绍了CSS实现横向粒子变动加载动画的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-04-25

  • 深入解析动态加载css的实现方法

    因为公司项目需要用到懒加载来提高网站加载速度，所以将非首屏渲染必需的css文件进行动态加载操作。接下来通过本文给大家分享实现代码，需要的朋友参考下
    2017-01-18

最新评论

关注微信公众号

扫一扫