99偷拍视频精品区一区二,口述久久久久久久久久久久,国产精品夫妇激情啪发布,成人永久免费网站在线观看,国产精品高清免费在线,青青草在线观看视频观看,久久久久久国产一区,天天婷婷久久18禁,日韩动漫av在线播放直播

怎么用純CSS實現小球跳躍臺階的動畫效果

這篇文章將為大家詳細講解有關怎么用純CSS實現小球跳躍臺階的動畫效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。

目前創新互聯公司已為成百上千家的企業提供了網站建設、域名、網站空間網站托管運營、企業網站設計、離石網站維護等服務,公司將堅持客戶導向、應用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協力一起成長,共同發展。

代碼解讀

定義dom,容器中包含5個元素,代表5個臺階:

<divclass="loader">

<span></span>

<span></span>

<span></span>

<span></span>

<span></span>

</div>

居中顯示:

body{

margin:0;

height:100vh;

display:flex;

align-items:center;

justify-content:center;

background-color:black;

}

定義容器尺寸:

.loader{

width:7em;

height:5em;

font-size:40px;

}

畫出5個臺階:

.loader{

display:flex;

justify-content:space-between;

align-items:flex-end;

}

.loaderspan{

width:1em;

height:1em;

background-color:white;

}

用變量讓5個臺階從低到高排序:

.loaderspan{

height:calc(var(--n)*1em);

}

.loaderspan:nth-child(1){

--n:1;

}

.loaderspan:nth-child(2){

--n:2;

}

.loaderspan:nth-child(3){

--n:3;

}

.loaderspan:nth-child(4){

--n:4;

}

.loaderspan:nth-child(5){

--n:5;

}

為臺階增加轉換排序方向的動畫效果:

.loaderspan{

animation:sort5sinfinite;

}

@keyframessort{

0%,40%,100%{

height:calc(var(--n)*1em);

}

50%,90%{

height:calc(5em-(var(--n)-1)*1em);

}

}

下面做小球的動畫,用了障眼法,使2個同色小球的交替運動看起來就像1個小球在做往復運動。

用偽元素畫出2個小球:

.loader::before,

.loader::after{

content:'';

position:absolute;

width:1em;

height:1em;

background-color:white;

border-radius:50%;

bottom:1em;

}

.loader::before{

left:0;

}

.loader::after{

left:6em;

}

增加讓小球向上運動的動畫效果:

.loader::before,

.loader::after{

animation:climbing5sinfinite;

visibility:hidden;

}

.loader::after{

animation-delay:2.5s;

}

@keyframesclimbing{

0%{

bottom:1em;

visibility:visible;

}

10%{

bottom:2em;

}

20%{

bottom:3em;

}

30%{

bottom:4em;

}

40%{

bottom:5em;

}

50%{

bottom:1em;

}

50%,100%{

visibility:hidden;

}

}

在向上運動的同時向兩側運動,形成上臺階的動畫效果:

.loader::before{

--direction:1;

}

.loader::after{

--direction:-1;

}

@keyframesclimbing{

0%{

bottom:1em;

left:calc(3em-2*1.5em*var(--direction));

visibility:visible;

}

10%{

bottom:2em;

left:calc(3em-1*1.5em*var(--direction));

}

20%{

bottom:3em;

left:calc(3em-0*1.5em*var(--direction));

}

30%{

bottom:4em;

left:calc(3em+1*1.5em*var(--direction));

}

40%{

bottom:5em;

left:calc(3em+2*1.5em*var(--direction));

}

50%{

bottom:1em;

left:calc(3em+2*1.5em*var(--direction));

}

50%,100%{

visibility:hidden;

}

}

最后,為上臺階的動作增加擬人效果:

@keyframesclimbing{

0%{

bottom:1em;

left:calc(3em-2*1.5em*var(--direction));

visibility:visible;

}

7%{

bottom:calc(2em+0.3em);

}

10%{

bottom:2em;

left:calc(3em-1*1.5em*var(--direction));

}

17%{

bottom:calc(3em+0.3em);

}

20%{

bottom:3em;

left:calc(3em-0*1.5em*var(--direction));

}

27%{

bottom:calc(4em+0.3em);

}

30%{

bottom:4em;

left:calc(3em+1*1.5em*var(--direction));

}

37%{

bottom:calc(5em+0.3em);

}

40%{

bottom:5em;

left:calc(3em+2*1.5em*var(--direction));

}

50%{

bottom:1em;

left:calc(3em+2*1.5em*var(--direction));

}

50%,100%{

visibility:hidden;

}

}

關于“怎么用純CSS實現小球跳躍臺階的動畫效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。

當前文章:怎么用純CSS實現小球跳躍臺階的動畫效果
網站鏈接:http://www.yijiale78.com/article34/jjpipe.html

成都網站建設公司_創新互聯,為您提供營銷型網站建設、面包屑導航用戶體驗品牌網站制作、網站內鏈、App開發

廣告

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

網站建設網站維護公司