怎么使用純CSS代碼實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫效果

這篇文章主要為大家展示了“怎么使用純CSS代碼實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫效果”，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用純CSS代碼實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫效果”這篇文章吧。

我們提供的服務(wù)有：成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、外貿(mào)營銷網(wǎng)站建設(shè)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、昌邑ssl等。為上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的昌邑網(wǎng)站制作公司

代碼解讀

定義dom，容器中包含2個(gè)元素，分別代表沙漏的上半部和下半部：

<divclass="loader">

<spanclass="top"></span>

<spanclass="bottom"></span>

</div>

居中顯示：

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:gainsboro;

}

定義容器尺寸，并設(shè)置子元素整體布局：

.loader{

width:4.3em;

height:9.8em;

font-size:10px;

position:relative;

display:flex;

flex-direction:column;

align-items:center;

justify-content:space-between;

}

畫出2個(gè)正方形：

.top,

.bottom{

width:3.5em;

height:3.5em;

border-style:solid;

border-color:saddlebrown;

}

通過邊框、圓角和旋轉(zhuǎn)，把2個(gè)正方形變成沙漏形狀：

.top,

.bottom{

border-width:0.2em0.2em0.6em0.6em;

border-radius:50%100%50%30%;

}

.top{

transform:rotate(-45deg);

}

.bottom{

transform:rotate(135deg);

}

用偽元素畫出沙子，上部的沙子的頂部是大圓弧，下部的沙子的頂部是小圓弧：

.top::before,

.bottom::before{

content:'';

position:absolute;

width:inherit;

height:inherit;

background-color:deepskyblue;

}

.top::before{

border-radius:0100%00;

}

.bottom::before{

border-radius:00035%;

}

定義沙子的動(dòng)畫屬性：

.top::before,

.bottom::before{

animation:2slinearinfinite;

}

增加沙子從沙漏的上半部落下的動(dòng)畫效果：

.top::before{

animation-name:drop-sand;

}

@keyframesdrop-sand{

to{

transform:translate(-2.5em,2.5em);

}

}

增加沙子的沙漏在下半部堆積的動(dòng)畫效果：

.bottom::before{

transform:translate(2.5em,-2.5em);

animation-name:fill-sand;

}

@keyframesfill-sand{

to{

transform:translate(0,0);

}

}

隱藏沙漏上半部和下半部容器外的部分，此時(shí)上面2個(gè)動(dòng)畫的疊加效果是沙子從上半部漏下，慢慢在下半部堆積：

.top,

.bottom{

overflow:hidden;

}

用外層容器的偽元素制作一個(gè)窄長條，模擬流動(dòng)的沙子：

.loader::after{

content:'';

position:absolute;

width:0.2em;

height:4.8em;

background-color:deepskyblue;

top:1em;

}

增加沙子流動(dòng)的動(dòng)畫效果：

.loader::after{

animation:flow2slinearinfinite;

}

@keyframesflow{

10%,100%{

transform:translateY(3.2em);

}

}

最后，增加沙漏的翻轉(zhuǎn)動(dòng)畫：

.loader{

animation:rotating2slinearinfinite;

}

@keyframesrotating{

0%,90%{

transform:rotate(0);

}

100%{

transform:rotate(0.5turn);

}

}


以上是“怎么使用純CSS代碼實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享標(biāo)題：怎么使用純CSS代碼實(shí)現(xiàn)一個(gè)沙漏的動(dòng)畫效果
當(dāng)前路徑：http://muchs.cn/article30/iepopo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供全網(wǎng)營銷推廣、搜索引擎優(yōu)化、App開發(fā)、關(guān)鍵詞優(yōu)化、建站公司、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司