CSS3完成颗粒转动伸缩载入动漫

2020-10-30 14:19 jianzhan

本文应用CSS3的转动Transform特性和动漫的实行百分比制做而成,很非常的CSS3完成颗粒转动伸缩载入动漫,实际內容以下
 

CSS Code拷贝內容到剪贴板
  1. #loader6 {     
  2.   margin60px 50px;     
  3.   floatleft;     
  4.   font-size90px;     
  5.   text-indent: ⑼999em;     
  6.   overflowhidden;     
  7.   width: 1em;     
  8.   height: 1em;     
  9.   border-radius: 50%;     
  10.   positionrelative;     
  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款式撰写有一定的协助,制做出更多精彩的载入动漫实际效果。