CSS完成尺寸同样、色调浓淡不1的颗粒转动载入动

日期:2020-09-20 类型:科技新闻 

关键词:微信小程序页面设计,python小程序,小程序首页模板,如何建立微信小程序,怎么做微信小程序

本文运用CSS完成尺寸同样、色调浓淡不1的颗粒转动载入动漫,供大伙儿参照,实际內容以下。

animation特性设定的主要参数:
       ● 设定目标所运用的动漫名字:load5。
       ● 设定目标动漫的不断時间:1.1s。
       ● 设定目标动漫的过渡种类:
             ease:动漫以低速刚开始,随后加速,在完毕前变慢。
             linear:匀速。
             ease-in:动漫以低速刚开始。
             ease-out:动漫以低速完毕。
             ease-in-out:动漫以低速刚开始和完毕,相对ease迟缓,速率更匀称。
             step-start:按keyframes设定逐帧显示信息,第1帧为keyframes设定的第1帧。
             step-end:按keyframes设定逐帧显示信息,第1帧为款式的原始值。
             steps(<number>[, [ start | end ] ]?):把keyframes里设定的1帧等分成几帧,start为第1次显示信息第1帧,end第1次显示信息款式的原始值,比如:steps(4,start)。
             cubic-bezier(<number>, <number>, <number>, <number>):在 cubic-bezier 涵数中自身的值。将会的值是从 0 到 1 的标值。贝兹曲线图限定了首尾两操纵点的部位,根据调剂正中间两操纵点的部位能够灵便获得常见的动漫实际效果。
        ● 设定目标动漫的循环系统次数:infinite(无尽循环系统)。

 将动漫运作全部全过程的分成0%,12.5%,25%,37.5%,50%,62.5%,75%,87.5%,100%这8个环节,在不一样的环节应用色调的全透明度制做出不一样的黑影实际效果。

     

CSS Code拷贝內容到剪贴板
  1. #load5,     
  2. #loader5 {     
  3.   margin80px 50px;     
  4.   floatleft;     
  5.   font-size25px;     
  6.   width: 1em;     
  7.   height: 1em;     
  8.   border-radius: 50%;     
  9.   positionrelative;     
  10.   text-indent: ⑼999em;     
  11.   -webkit-animation: load5 1.1s infinite ease;     
  12.   animation: load5 1.1s infinite ease;     
  13. }     
  14. @-webkit-keyframes load5 {     
  15.   0%,     
  16.   100% {     
  17.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 1), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  18.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  19.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  20.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.5), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.7);     
  21.   }     
  22.   12.5% {     
  23.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 1),     
  24.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  25.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  26.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.5);     
  27.   }     
  28.   25% {     
  29.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.7),     
  30.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  31.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  32.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  33.   }     
  34.   37.5% {     
  35.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0em rgba(128, 0, 255, 0.5),     
  36.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  37.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  38.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  39.   }     
  40.   50% {     
  41.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  42.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),     
  43.                  0 2.5em 0 0 rgba(128, 0, 255, 1), ⑴.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),     
  44.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  45.   }     
  46.   62.5% {     
  47.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  48.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),     
  49.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 1),     
  50.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  51.   }     
  52.   75% {     
  53.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  54.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  55.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),     
  56.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 1), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  57.   }     
  58.   87.5% {     
  59.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  60.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  61.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),     
  62.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 0.7), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 1);     
  63.   }     
  64. }     
  65. @keyframes load5 {     
  66.   0%,     
  67.   100% {     
  68.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 1), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  69.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  70.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  71.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.5), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.7);     
  72.   }     
  73.   12.5% {     
  74.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.7), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 1),     
  75.                  2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  76.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  77.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.5);     
  78.   }     
  79.   25% {     
  80.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.5), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.7),     
  81.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  82.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  83.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  84.   }     
  85.   37.5% {     
  86.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0em rgba(128, 0, 255, 0.5),     
  87.                  2.5em 0em 0 0 rgba(128, 0, 255, 0.7), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  88.                  0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.2),     
  89.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  90.   }     
  91.   50% {     
  92.      box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  93.                  2.5em 0 0 0 rgba(128, 0, 255, 0.5), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.7),     
  94.                  0 2.5em 0 0 rgba(128, 0, 255, 1), ⑴.8em 1.8em 0 0 rgba(128, 255, 0, 0.2),     
  95.                  ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  96.   }     
  97.   62.5% {     
  98.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  99.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.5),     
  100.                   0 2.5em 0 0 rgba(128, 0, 255, 0.7), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 1),     
  101.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 0.2), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  102.   }     
  103.   75% {     
  104.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  105.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  106.                   0 2.5em 0 0 rgba(128, 0, 255, 0.5), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.7),     
  107.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 1), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2);     
  108.   }     
  109.   87.5% {     
  110.       box-shadow: 0 ⑵.6em 0 0 rgba(128, 0, 255, 0.2), 1.8em ⑴.8em 0 0 rgba(128, 0, 255, 0.2),     
  111.                   2.5em 0 0 0 rgba(128, 0, 255, 0.2), 1.75em 1.75em 0 0 rgba(128, 0, 255, 0.2),     
  112.                   0 2.5em 0 0 rgba(128, 0, 255, 0.2), ⑴.8em 1.8em 0 0 rgba(128, 0, 255, 0.5),     
  113.                   ⑵.6em 0 0 0 rgba(128, 0, 255, 0.7), ⑴.8em ⑴.8em 0 0 rgba(128, 0, 255, 1);     
  114.   }     
  115. }   

以上便是本文的所有內容,期待对大伙儿学习培训完成CSS颗粒转动载入动漫有一定的启迪。