CSS完成横向颗粒变化载入动漫

日期:2021-03-04 类型:科技新闻 

关键词:怎么把小程序变成二维码,微信小程序怎么开通,微信小程序csdn,小程序开发,网络答题小程序

本文案例为大伙儿共享了CSS完成横向颗粒变化载入动漫的对应编码,供大伙儿参照,实际內容以下

此处用到了CSS3动漫animation特性的animation-fill-mode特性和animation-delay特性。

 ● animation-fill-mode特性要求动漫在播发以前或以后,其动漫实际效果是不是可见。
        none:不更改默认设置个人行为。
        forwards:当动漫进行后,维持最终1个特性值(在最终1个重要帧中界定)。
        backwards:在animation-delay所特定的1段時间内,在动漫显示信息以前,运用刚开始特性值(在第1个重要帧
中界定)。
       both: 向前和向后填充方式都被运用。   

 ●  animation-delay特性界定动漫什么时候刚开始。该特性容许负值,示例中延迟时间0.16s实行动漫。         

CSS Code拷贝內容到剪贴板
  1. #loader7:before,     
  2. #loader7:after,     
  3. #loader7 {     
  4.   border-radius: 50%;     
  5.   width: 2.5em;     
  6.   height: 2.5em;     
  7.   -webkit-animation-fill-mode: both;     
  8.   animation-fill-mode: both;     
  9.   -webkit-animation: load7 1.8s infinite ease-in-out;     
  10.   animation: load7 1.8s infinite ease-in-out;     
  11. }     
  12. #loader7 {     
  13.   margin60px 50px;     
  14.   floatleft;     
  15.   font-size10px;     
  16.   positionrelative;     
  17.   text-indent: ⑼999em;     
  18.   -webkit-animation-delay: 0.16s;     
  19.   animation-delay: 0.16s;     
  20. }     
  21. #loader7:before {     
  22.   left: ⑶.5em;     
  23. }     
  24. #loader7:after {     
  25.   left: 3.5em;     
  26.   -webkit-animation-delay: 0.32s;     
  27.   animation-delay: 0.32s;     
  28. }     
  29. #loader7:before,     
  30. #loader7:after {     
  31.   content'';     
  32.   positionabsolute;     
  33.   top: 0;     
  34. }     
  35. @-webkit-keyframes load7 {     
  36.   0%,     
  37.   80%,     
  38.   100% {     
  39.     box-shadow: 0 2.5em 0 ⑴.3em #000000;     
  40.   }     
  41.   40% {     
  42.     box-shadow: 0 2.5em 0 0 #000000;     
  43.   }     
  44. }     
  45. @keyframes load7 {     
  46.   0%,     
  47.   80%,     
  48.   100% {     
  49.     box-shadow: 0 2.5em 0 ⑴.3em #000000;     
  50.   }     
  51.   40% {     
  52.     box-shadow: 0 2.5em 0 0 #000000;     
  53.   }     
  54. }   

 以上便是本文的所有內容,期待对大伙儿学习培训CSS款式开展载入有一定的协助。

上一篇:CSS3精准定位和波动详解 返回下一篇:没有了