网页制作 
首页 > 网页制作 > 浏览文章

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

(编辑:jimmy 日期: 2024/12/24 浏览:3 次 )

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

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中的自定义属性
下一篇:CSS清除浮动的常用方法优缺点分析
一句话新闻
一文看懂荣耀MagicBook Pro 16
荣耀猎人回归!七大亮点看懂不只是轻薄本,更是游戏本的MagicBook Pro 16.
人们对于笔记本电脑有一个固有印象:要么轻薄但性能一般,要么性能强劲但笨重臃肿。然而,今年荣耀新推出的MagicBook Pro 16刷新了人们的认知——发布会上,荣耀宣布猎人游戏本正式回归,称其继承了荣耀 HUNTER 基因,并自信地为其打出“轻薄本,更是游戏本”的口号。
众所周知,寻求轻薄本的用户普遍更看重便携性、外观造型、静谧性和打字办公等用机体验,而寻求游戏本的用户则普遍更看重硬件配置、性能释放等硬核指标。把两个看似难以相干的产品融合到一起,我们不禁对它产生了强烈的好奇:作为代表荣耀猎人游戏本的跨界新物种,它究竟做了哪些平衡以兼顾不同人群的各类需求呢?