开心学习
当前位置：Web前端 > > 正文

css3动画实现loading（CSS3实现粒子旋转伸缩加载动画）

时间：2021-11-03 12:35:50类别：Web前端

css3动画实现loading

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

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

css3动画实现loading（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
    上一篇下一篇

    猜您喜欢

    热门推荐

    © 2021 开心学习