首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 454
收藏 0 赞 0 分享

本文运用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样式编写有所帮助，制作出更多精彩的加载动画效果。 

更多精彩内容其他人还在看

利用纯CSS3实现动态的自行车特效源码

这篇文章主要介绍了如何利用纯CSS3实现动态的自行车的方法，文中给出了完整的实例代码，实现后的效果非常不错，大家可以直接运行看看效果，需要的朋友下面来一起学习学习吧。
收藏 0 赞 0 分享

web前端开发规范文档(2014年版本)

这篇文章主要为大家介绍了前端开发团队遵循和约定的代码书写规范，意在提高代码的规范性和可维护性,需要的朋友可以参考下
收藏 0 赞 0 分享

前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范

这篇文章主要介绍了前端编码规范（4）—— CSS 和 Sass (SCSS) 开发规范,需要的朋友可以参考下
收藏 0 赞 0 分享

手把手教你用CSS实现带箭头的流程进度条

这篇文章主要给大家介绍了利用CSS实现带箭头的流程进度条大方法，文中给出了详细的示例代码，对大家具有一定的参考价值，有需要的朋友们一起来看看吧。
收藏 0 赞 0 分享

CSS实现三栏布局的四种方法示例

可能有人不理解三栏布局是什么，其实三栏布局页面分为左中右三部分，然后对中间一部分做自适应的一种布局方式，下面这篇文章就给大家详细介绍了CSS实现三栏布局的四种方法，需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

利用css实现浮雕效果示例代码

这篇文章主要给大家介绍了利用css如何实现浮雕的效果，文中给出了详细的示例代码和解释，相信对大家有一定的参考价值，感兴趣的朋友们下面来一起看看吧。
收藏 0 赞 0 分享

浏览器默认样式（User Agent Stylesheet）的介绍与最佳处理方法

这篇文章主要给大家介绍了浏览器默认样式（User Agent Stylesheet）的相关资料，并给出了相对应的最佳解决方法。有需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

css中px、em和rem的区别总结

相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大家详细介绍关于css中px、em和rem的区别，需要的朋友可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享

CSS3实现点击放大的动画实例代码

这篇文章主要给大家介绍了关于利用CSS3实现点击放大的动画效果，文中给出了完整的实例代码，相信对大家具有一定的参考价值，需要的朋友们可以一起来看看吧。
收藏 0 赞 0 分享

利用css代码实现纸飞机效果实例源码

这篇文章主要给大家介绍了如何利用css代码实现纸飞机的效果，实现后效果非常不错，文中给出了详细的实例代码，大家可以参考借鉴，下面来一起看看吧。
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22