整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          手把手教你使用CSS3動畫特性實現loading效果,趕緊來學習一下吧

          loading效果在實際開發中是很常見的,尤其是在Ajax請求的時候,可以給用戶一個很好的交互體驗。

          今天這篇文章我們一起來看看如何通過CSS3實現各種不同的loading效果吧,文章中的代碼可以從github自取。

          https://github.com/zhouxiongking/article-pages/blob/master/articles/loading/loading.html

          CSS3

          實現效果

          首先我們來看看需要實現的效果。

          效果圖

          然后我們一個個來看都是怎么實現的吧。

          loadingA

          loadingA的效果就如音樂播放時的動態條一般,不停的連續執行。

          其主要實現思路如下:

          • 每個豎狀條都是一個簡單的div,div為一個小的圓形。

          • 給每個div加上一個動畫效果,該動畫的效果是高度逐漸變長,最后再變回原樣。

          • 每個div延遲不同的時間才開始執行,這樣就會有先后的層次感。

          然后我們來看看各個部分的代碼實現。

          • 基本的div元素

          基本的div元素是一個小的圓形。

          基本的div元素

          • 定義動畫

          定義的動畫主要是改變div的高度,在完成50%的時候達到最高值,完成100%時恢復到原來高度。

          動畫效果

          • 設置動畫

          將定義的動畫添加至animation屬性,設置一個動畫總執行時間,然后給5個div設置不同的延時時間。

          設置動畫

          • HTML元素

          將以上設置的CSS屬性都添加至HTML元素中。

          HTML元素

          將以上代碼寫完后,直接在瀏覽器運行就可以看到如loadingA的效果了。

          loadingB

          如果細心的看完loadingA的實現過程,一定可以聯想到loadingB的實現。

          loadingA是通過給高度加動畫,那么loadingB就是通過給寬度加動畫,同樣給5個div不同的延遲時間。

          這里我只給出其動畫定義,其他的內容與loadingA類似,詳細的內容可以通過github去看。

          loadingB動畫

          loadingC

          loadingC的實現效果如下。

          loadingC

          在loadingA和loadingB中是通過給高度和寬度增加動畫實現的,而loadingC是通過給五個div增加縱向位移實現的。

          loadingC實現的關鍵點就在于translateY的使用,因為動畫是從下往上跳動,所以在完成度50%時,translateY設定為負值。

          其定義的動畫部分代碼如下所示。

          定義動畫

          loadingD

          loadingD的實現效果如下。

          loadingD效果

          通過效果圖我們發現有兩點差異:

          • loading過程中透明度會發生變化,這個通過opacity實現。

          • 在接近完成時有個上下輕微抖動的效果,這個通過設置小單位的正負translateY值。

          得到的動畫代碼如下。

          loadingD動畫

          loadingE

          loadingE的動畫效果如下。

          loadingE

          loadingE的效果同loadingD類似,loadingD是通過縱向的位移變換,可以通過translateY實現。

          loadingE是通過水平方向位移變換,可以通過translateX來實現。

          而有一點不同的是,loadingE的div初始位置就是translateX(-300px),表示從左側開始運動。

          loadingE動畫

          loadingF

          loadingF定義的動畫如下所示。

          loadingF

          loadingF是旋轉效果,可以很容易想到是通過rotate實現。

          loadingF中只有一個div,邊框設置為虛線即可,其CSS樣式如下。

          loadingF基本樣式

          其定義的動畫樣式如下。

          loadingF定義動畫

          loadingG&loadingH

          loadingG與loadingH的動畫效果如下。

          loadingG&loadingH

          loadingG與loadingH類似,loadingH在loadingG的基礎上增加了幾個點。

          loadingG中是通過設置一個縱向的div-1,在該div-1內增加一個div-2,div-2就是轉動的圓點,div-2通過絕對定位計算出實際位置,當div-1大小變化時,div-2也應該重新計算位置。

          div-2的CSS代碼如下所示。

          loadingG基本樣式

          在loadingH中,div-1內有四個div,分別表示轉動的四個圓點,也是通過絕對定位計算偏移位置。

          最后設置動畫,只需要讓div-1在一個動畫周期內旋轉360度即可。

          loadingG

          loadingI

          loadingI的效果圖如下所示。

          loadingI

          loadingI的動畫主要涉及到放大縮小和旋轉兩個方面,放大縮小通過scale實現,旋轉通過rotate實現。具體的可以看看github上的完整代碼。

          結束語

          今天這篇文章主要是教大家如何使用CSS3的動畫特性去實現loading效果,完全可以不用借助于第三方庫,大家也動動手自己實現一下吧。


          loading等待效果圖對于前端頁面或者APP展示來說是非常常見的,目前大多數的效果圖都是GIF的格式。鑒于GIF格式的圖會比較大,我們完全可以使用CSS去實現一個漂亮的loading效果,今天我們就一起來看看吧。

          CSS3

          如果有感興趣的可以去github上看源碼,github地址為:

          https://github.com/zhouxiongking/article-pages/blob/master/articles/loading-pie/loading-pie.html

          效果圖

          首先,我們一起來看下使用CSS3編寫的loading效果圖,如下所示。

          loading效果圖

          效果分析

          針對上面的loading效果,我們進行仔細的分析,整體loading效果是由內圓和外圓組成。

          內部圓實際是由四個半圓組成,2個左半圓,2個右半圓,每側的兩個半圓通過顏色深淺進行區分,當然顏色大家可以隨便選取,然后通過定義動畫,在不同的時間節點通過z-index屬性顯示不同的半圓,剛好組成一個完整的旋轉效果。

          頁面實現

          這部分我們來看看頁面是如何通過代碼實現的。

          • HTML

          首先是頁面的HTML代碼,正如上面的分析,首先要具有內圓和外圓兩個div,然后內圓是通過4個半圓實現,實際內部是4個div,因此我們可以得到以下的HTML部分代碼。

          頁面HTML代碼

          • CSS

          其實最核心的部分就是CSS代碼,我會慢慢分析如何寫出CSS部分的代碼。

          首先是外圓部分,實際是一個完整的div通過border屬性構成3/4的圓,然后通過動畫轉動這個3/4的圓。因此我們可以直接得出外圓的所有樣式如下。

          外圓及其動畫樣式

          然后是內圓部分,內圓實際是一個完整的div,通過border-radius屬性得到完整的圓,其樣式如下。

          內圓外圈屬性

          其次是內部四個半圓的樣式,分為左邊和右邊兩個部分,左邊和右邊每個部分因為顏色上有區別,需要定義不同的動畫。其中左邊兩個半圓的通用屬性如下。

          左邊半圓通用屬性

          左半邊深色圓的動畫樣式如下。

          左半邊深色圓動畫

          左半邊淺色圓的動畫效果如下。

          左半邊淺色圓動畫

          右半邊兩個半圓通用樣式如下。

          右半邊兩個半圓通用樣式

          右半邊深色圓有動畫效果,而淺色圓沒有動畫效果,它們的樣式如下。

          右半邊深淺色半圓樣式

          至此,所有的CSS樣式講解完畢,如果大家完整運行后就可以得到文章開始的效果。

          結束語

          本篇文章主要講解了如何使用CSS3動畫來制作一個loading效果圖,感興趣的可以直接去github上看源碼,希望對你有所幫助~

          前做網站開發,大都喜歡用一些小圖片小圖標,但由于使用小圖標會增加Request的次數并增加網頁大小。這樣的用戶體驗以及對SEO都不太友好。所以后來推出了字體圖標,如font-awesome。

          在網站中,特別是使用AJAX技術,Loading圖標必不可少,大多數人都是使用一個gif圖片來做,這里我介紹使用CSS3動畫技術來實現Loading特效,有些人也許會說IE怎么辦,我只能說,忘了它吧。先來個效果圖:

          這里沒有動畫效果,本來想將CSS動畫錄制為gif的,但錄制效果太差,放棄了,只貼這個圖片吧,如果有朋友知道有錄制效果好的軟件,麻煩告之,不勝感激。需要查看實際效果的朋友,可復制代碼運行即可。

          html完整代碼:

          <html>

          <head>

          <title>css3動畫實現超酷loading特效</title>

          <style type="text/css">

          .loading {

          -webkit-animation: fadein 2s;

          -moz-animation: fadein 2s;

          -o-animation: fadein 2s;

          animation: fadein 2s;

          }

          .spinner-wrapper {

          position: absolute;

          top: 0;

          left: 0;

          z-index: 300;

          height: 100%;

          min-width: 100%;

          min-height: 100%;

          background: rgba(255,255,255,0.93);

          }

          .spinner {

          -moz-border-bottom-colors: none;

          -moz-border-left-colors: none;

          -moz-border-right-colors: none;

          -moz-border-top-colors: none;

          animation: 1.5s ease 0s normal none infinite running spin;

          border-color: rgba(255, 0, 0, 1) transparent;

          border-image: none;

          border-radius: 50px;

          border-style: solid;

          border-width: 20px;

          display: block;

          height: 1px;

          left: 50%;

          margin-left: -160px;

          position: absolute;

          top: 45%;

          width: 1px;

          }

          .spinner-text {

          color: #000;

          font-family: Arial;

          font-size: 20px;

          left: 50%;

          letter-spacing: 1px;

          margin-left: -100px;

          margin-top: 2px;

          position: absolute;

          top: 45%;

          }

          @keyframes spin {

          0%, 100% {

          transform: rotate(0deg) scale(1);

          }

          50% {

          transform: rotate(720deg) scale(0.6);

          }

          }

          @keyframes spin {

          0%, 100% {

          transform: rotate(0deg) scale(1);

          }

          50% {

          transform: rotate(720deg) scale(0.6);

          }

          }

          </style>

          </head>

          <body>

          <div class="loading">

          <div class="spiner-wrapper">

          <div class="spinner-wrapper">

          <span class="spinner-text">數據加載中,請稍候...</span>

          <span class="spinner"></span>

          </div>

          </div>

          </div>

          </body>

          </html>

          上面即為本動畫效果所有代碼,直接復制代碼便可輕松應用到你的網頁中。從此告別gif吧,同時跟低版本的IE告別吧。


          主站蜘蛛池模板: 日本精品一区二区三区四区| 亚洲AV网一区二区三区| 午夜福利无码一区二区| 国产精品一区二区av| 国产人妖视频一区在线观看| 91视频国产一区| 成人精品一区二区三区不卡免费看| 成人毛片无码一区二区| 亚洲.国产.欧美一区二区三区| 亚洲AV无码一区东京热| 国产成人精品一区二区秒拍| 国产成人一区在线不卡| 色系一区二区三区四区五区| 国产成人精品无码一区二区老年人| 亚洲精品精华液一区二区| 亚洲熟妇成人精品一区| 国产精品成人免费一区二区| 蜜桃无码一区二区三区| 精品无码国产一区二区三区AV | 狠狠色婷婷久久一区二区三区 | 国产乱码精品一区二区三 | 男插女高潮一区二区| 91视频一区二区三区| 91视频一区二区三区| 精品国产亚洲一区二区三区在线观看 | 亚洲一区二区三区久久| 亚洲美女视频一区二区三区| 91久久精品国产免费一区| 91福利一区二区| 五十路熟女人妻一区二区| 在线|一区二区三区| 亚洲男人的天堂一区二区| 国产成人综合精品一区| 久久一区二区精品| 中文字幕精品一区二区| 国产三级一区二区三区| 熟女大屁股白浆一区二区| 无码国产精品一区二区免费vr | 国产福利一区二区在线视频 | 亚洲国产精品综合一区在线 | 无码播放一区二区三区|