CSS3加載動畫

時間  2019-11-18
標籤 css3 css 加載 動畫 欄目 CSS 简体版
原文   原文鏈接

 

圖1web

 

一般咱們都使用gif格式的圖片或者使用Ajax來實現諸如這類的動態加載條,可是如今CSS3也能夠完成,而且靈活性更大.動畫

選1個例子看看怎麼實現的吧:spa

 

效果圖：orm

加載條  圖2xml

代碼：圖片

 

使用1個名爲'loading'的層裝全部加載內容，裏面須要有多少條目則添加這麼多個div，而且使用相同的class名稱'coloumns'， 再爲每一個動畫條添加各自延遲的CSS代碼ci

 

 

Html代碼   收藏代碼
  1. <div id='loading'>  
  2.   
  3.                  <div id='coloumn1' class='coloumns'></div>  
  4.   
  5.                  <div id='coloumn2' class='coloumns'></div>  
  6.   
  7.                  <div id='coloumn3' class='coloumns'></div>  
  8.   
  9.                 <div id='coloumn4' class='coloumns'></div>  
  10.   
  11.                  <div id='coloumn5' class='coloumns'></div>  
  12.   
  13.                  <div id='coloumn6' class='coloumns'></div>  
  14.   
  15. </div>  

 

 

Html代碼   收藏代碼
  1.     #loading{  
  2.   
  3.          margin-top:30px;  
  4.   
  5.          float:left;  
  6.   
  7.          width:95px;  
  8.   
  9.          height:32px;  
  10.   
  11.            
  12.   
  13.          margin-left:30px;  
  14.   
  15.          /* CSS3圓角邊框 */  
  16.   
  17.          -webkit-border-radius: 5px;  
  18.   
  19.          -moz-border-radius: 5px;  
  20.   
  21.          border-radius: 5px;  
  22. }  
  23.   
  24. .coloumns{  
  25.   
  26.            
  27.   
  28.          border:1px solid #fff;  
  29.   
  30.          float:left;  
  31.   
  32.          height:30px;  
  33.   
  34.          margin-left:5px;  
  35.   
  36.          width:10px;  
  37.   
  38.          /* 在這兒咱們定義一個動畫名，隨後咱們將會實現它 */  
  39.   
  40.          -webkit-animation-name: animation;  
  41.   
  42.          /* 動畫循環一次的總時間 */  
  43.   
  44.          -webkit-animation-duration: 3s;  
  45.   
  46.          /* 動畫的循環次數，咱們設置爲無窮大 */  
  47.   
  48.          -webkit-animation-iteration-count: infinite;  
  49.   
  50.          -webkit-animation-direction: linear;  
  51.   
  52.          /* 最初全部列的透明度都爲0 */  
  53.   
  54.          opacity:0;  
  55.   
  56.          /* 開始時將它縮放爲0.8 */  
  57.   
  58.          -webkit-transform:scale(0.8);  
  59.   
  60.          }  
  61.   
  62. #coloumn1{  
  63.   
  64.          /* 第一列動畫延遲0.3秒 */  
  65.   
  66.          -webkit-animation-delay: .3s;  
  67.   
  68.  }  
  69.   
  70. #coloumn2{  
  71.   
  72.          /* 第二列動畫延遲0.4秒 */  
  73.   
  74.          -webkit-animation-delay: .4s;  
  75.   
  76. }  
  77.   
  78. #coloumn3{  
  79.   
  80.          /* 第三列動畫延遲0.5秒*/  
  81.   
  82.          -webkit-animation-delay: .5s;  
  83.   
  84. }  
  85.   
  86. #coloumn4{  
  87.   
  88.          /* 第四列動畫延遲0.6秒*/  
  89.   
  90.          -webkit-animation-delay: .6s;  
  91.   
  92.  }  
  93.   
  94. #coloumn5{  
  95.   
  96.          /* 第四列動畫延遲0.7秒*/  
  97.   
  98.          -webkit-animation-delay: .7s;  
  99.   
  100. }  
  101.   
  102. #coloumn6{  
  103.   
  104.          /* 第四列動畫延遲0.8秒*/  
  105.   
  106.          -webkit-animation-delay: .8s;  
  107.   
  108. }  
  109.   
  110. /* 以前咱們曾經定義過動畫的名稱，咱們在這兒設置動畫的屬性 */  
  111.   
  112. @-webkit-keyframes animation{  
  113.   
  114.          /* 在動畫開始時每一列的透明度都是0 */  
  115.   
  116.          0%{opacity:0;}  
  117.   
  118.          /* 在動畫中間時每一列的透明度都是1 */  
  119.   
  120.          50%{opacity:1;}  
  121.   
  122.          /*在動畫結束時每一列的透明度都還原到0 */  
  123.   
  124.          100%{opacity:0;}  
  125.   
  126. }  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程