這篇文章主要介紹“css3緩沖和等待效果怎么實現”，在日常操作中，相信很多人在css3緩沖和等待效果怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”css3緩沖和等待效果怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

創新互聯總部坐落于成都市區，致力網站建設服務有成都網站制作、網站設計、外貿網站建設、網絡營銷策劃、網頁設計、網站維護、公眾號搭建、成都小程序開發、軟件開發等為企業提供一整套的信息化建設解決方案。創造真正意義上的網站建設，為互聯網品牌在互動行銷領域創造價值而不懈努力！

效果一

HTML

<div class="zh-loading"><ul><li></li><li></li><li></li><li></li></ul></div>

CSS

.zh-loading{position: absolute;z-index: 9;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.75);}

.zh-loading ul{position: absolute;z-index: 2;left: 50%;top: 50%;height: 60px;overflow: hidden;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}

.zh-loading ul li{float: left;height: 100%;width: 4px;margin: 0 2px;background-color: #ccc;-webkit-animation: stretchdelay 1.2s infinite ease-in-out;animation: stretchdelay 1.2s infinite ease-in-out;}

.zh-loading ul li:nth-of-type(2){-webkit-animation-delay: -1.1s;animation-delay: -1.1s;}

.zh-loading ul li:nth-of-type(3){-webkit-animation-delay: -1.0s;animation-delay: -1.0s;}

.zh-loading ul li:nth-of-type(4){-webkit-animation-delay: -0.9s;animation-delay: -0.9s;}

@-webkit-keyframes stretchdelay{0%, 40%, 100%{-webkit-transform: scaleY(0.4)}

20%{-webkit-transform: scaleY(1.0)}}

@keyframes stretchdelay{0%, 40%, 100%{transform: scaleY(0.4);-webkit-transform: scaleY(0.4);}

20%{transform: scaleY(1.0);-webkit-transform: scaleY(1.0);}}

效果二

<style type="text/css">

@keyframes load{

0%{transform:rotate(0)}

100%{transform:rotate(-360deg)}

}

#load{width: 200px;height: 200px;animation:load 1s  linear infinite; transform-origin:center center;}

</style>

<div id="load">

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="200px" height="200px"  viewBox="0 0 200 200" xml:space="preserve">

<g>

<linearGradient id="right" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180">

<stop  offset="0" style="stop-color:#4886CD"/>

<stop  offset="1" style="stop-color:#9DBFE4"/><!--藍到淺藍漸變-->

</linearGradient>

<path fill="url(#right)" d="M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z"/><!--右半圓環-->

<linearGradient id="left" gradientUnits="userSpaceOnUse" x1="50" y1="0" x2="50" y2="180">

<stop  offset="0" style="stop-color:#FFFFFF"/>

<stop  offset="1" style="stop-color:#9DBFE4"/><!--淺藍到白色漸變-->

</linearGradient>

<path fill="url(#left)" d="M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z"/><!--左半圓環-->

<circle fill="#4886CD" cx="100" cy="10" r="10"/>

</g>

</svg>

</div>

效果三

HTML

<ul class="zh-loading"><li></li><li></li><li></li><li></li></ul>

CSS

.zh-loading{display: none;margin: 1rem auto 0;width: 34px;height: 34px;}

.zh-loading li{float: left;width: 14px;height: 14px;margin: 2px 0 0 2px;background-color: #F2F2F2;}

.zh-loading li:nth-of-type(1){-webkit-animation: loadingEffect 1s ease 1s infinite;-ms-animation: loadingEffect 1s ease 1s infinite;animation: loadingEffect 1s ease 1s infinite;}

.zh-loading li:nth-of-type(2){-webkit-animation: loadingEffect 1s ease .25s infinite;-ms-animation: loadingEffect 1s ease .25s infinite;animation: loadingEffect 1s ease .25s infinite;}

.zh-loading li:nth-of-type(3){-webkit-animation: loadingEffect 1s ease .75s infinite;-ms-animation: loadingEffect 1s ease .75s infinite;animation: loadingEffect 1s ease .75s infinite;}

.zh-loading li:nth-of-type(4){-webkit-animation: loadingEffect 1s ease .5s infinite;-ms-animation: loadingEffect 1s ease .5s infinite;animation: loadingEffect 1s ease .5s infinite;}

@-webkit-keyframes loadingEffect{

to{background-color: #BCBCBC;}

}

@-ms-keyframes loadingEffect{

to{background-color: #BCBCBC;}

}

@keyframes loadingEffect{

to{background-color: #BCBCBC;}

}

到此，關于“css3緩沖和等待效果怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注創新互聯網站，小編會繼續努力為大家帶來更多實用的文章！

名稱欄目：css3緩沖和等待效果怎么實現
分享網址：http://www.js-pz168.com/article4/pojdie.html

成都網站建設公司_創新互聯，為您提供網站建設、關鍵詞優化、網站內鏈、服務器托管、域名注冊、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯