本篇文章透過程式碼實例介紹一下使用純css如何實作簡單載入動畫效果。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有幫助。
【推薦教學:CSS影片教學】
看到目前很多網站的載入效果用的是gif 圖片,於是很好奇了,只要用CSS 怎麼實現呢?乾貨來襲,請招招。
難度係數
☆☆☆☆
效果圖
#思路
這些線條長度一致,只是方向有所差別
每個線條不是貫穿整個直徑,而是以半徑為單位<div id="container"> <div class="load-line rotate-0"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-30"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-60"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-90"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-120"> <span class="left"></span> <span class="right"></span> </div> <div class="load-line rotate-150"> <span class="left"></span> <span class="right"></span> </div> <div id="circle-center"></div> </div>###解析:####### ##load-line 表示在相同直徑的半徑線條,由於旋轉方向一致,將其放在同一p 中######由於每個半徑線條的動畫延遲不一樣,添加left 和right 兩種線條# #####circle-center 表示內圓############CSS#######
#container, #circle-center { background: grey; } #container { position: relative; width: 600px; height: 300px; } #circle-center { position: absolute; top: 100px; left: 250px; width: 100px; height: 100px; border-radius: 100px; } .load-line { position: absolute; top: 150px; left: 200px; width: 200px; height: 13px; } .load-line > span { display: inline-block; width: 50%; height: 100%; border-radius: 20px; background: white; } .left { float: left; } .right { float: right; } .rotate-0 { transform: rotate(0); } .rotate-0 > .left { animation: load-effect 1.2s linear 0s infinite; } .rotate-0 > .right { animation: load-effect 1.2s linear 0.6s infinite; } .rotate-30 { transform: rotate(30deg); } .rotate-30 > .left { animation: load-effect 1.2s linear 0.1s infinite; } .rotate-30 > .right { animation: load-effect 1.2s linear 0.7s infinite; } .rotate-60 { transform: rotate(60deg); } .rotate-60 > .left { animation: load-effect 1.2s linear 0.2s infinite; } .rotate-60 > .right { animation: load-effect 1.2s linear 0.8s infinite; } .rotate-90 { transform: rotate(90deg); } .rotate-90 > .left { animation: load-effect 1.2s linear 0.3s infinite; } .rotate-90 > .right { animation: load-effect 1.2s linear 0.9s infinite; } .rotate-120 { transform: rotate(120deg); } .rotate-120 > .left { animation: load-effect 1.2s linear 0.4s infinite; } .rotate-120 > .right { animation: load-effect 1.2s linear 1.0s infinite; } .rotate-150 { transform: rotate(150deg); } .rotate-150 > .left { animation: load-effect 1.2s linear 0.5s infinite; } .rotate-150 > .right { animation: load-effect 1.2s linear 1.1s infinite; } @keyframes load-effect { 0% { opacity: 0; } 100% { opacity: 1; } }###解析:#########整個效果的父容器需要設定非static 的定位,方便子元素佈局。本例為relative######所有線條大小一致,並且有圓角######沿著同一直徑方向的線條旋轉角度一致######所有線條動畫效果一致(透明度在變化) ,動畫時長一致,動畫延遲從某一個線條開始,逐一遞加#########更多程式相關知識,請造訪:###程式設計影片###! ! ###
以上是使用純css實作簡單載入動畫效果(程式碼實例)的詳細內容。更多資訊請關注PHP中文網其他相關文章!