前端每日實(shí)戰(zhàn)：134# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作一個(gè)樹枝發(fā)芽的 loader

Gilbertat 發(fā)布于2019-08-29 16:43 / 3229人閱讀

摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。可交互視頻此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

效果預(yù)覽

按下右側(cè)的“點(diǎn)擊預(yù)覽”按鈕可以在當(dāng)前頁面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。

https://codepen.io/comehope/pen/LJmpXZ

可交互視頻

此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。

請(qǐng)用 chrome, safari, edge 打開觀看。

https://scrimba.com/p/pEgDAM/cdD8WHV

源代碼下載

每日前端實(shí)戰(zhàn)系列的全部源代碼請(qǐng)從 github 下載：

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，容器包含 2 個(gè)元素，branch 代表枝，leaves 代表葉，葉有 6 個(gè)子元素，代表 6 個(gè)葉片：

居中顯示：

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}

定義容器尺寸，并設(shè)置子元素水平居中：

.sapling {
    position: relative;
    width: 5em;
    height: 17.5em;
    font-size: 10px;
    display: flex;
    justify-content: center;
}

畫出樹枝：

.branch {
    position: absolute;
    width: 0.2em;
    height: inherit;
    border-radius: 25%;
    background: burlywood;
}

定義樹葉容器，設(shè)置為葉片在垂直方向均勻分布，并且從下到上排列：

.leaves {
    position: absolute;
    width: inherit;
    height: 15em;
    top: 1em;
    display: flex;
    flex-direction: column-reverse;
}

設(shè)置葉片的尺寸和和背景顏色：

.leaves span {
    width: 2.5em;
    height: 2.5em;
    background-color: limegreen;
}

設(shè)置左右葉片的各自樣式：

.leaves span:nth-child(odd) {
    border-bottom-left-radius: 3em;
    border-top-right-radius: 3em;
    transform-origin: right bottom;
    align-self: flex-start;
}

.leaves span:nth-child(even) {
    border-bottom-right-radius: 3em;
    border-top-left-radius: 3em;
    transform-origin: left bottom;
    align-self: flex-end;
}

至此，靜態(tài)效果繪制完成，接下來開始寫動(dòng)畫腳本。
引入 GSAP 庫：

聲明一個(gè)時(shí)間線對(duì)象：

let animation = new TimelineMax();

增加樹枝的入場(chǎng)動(dòng)畫效果，并為這個(gè)動(dòng)畫設(shè)置一個(gè)標(biāo)簽 branch：

animation.from(".branch", 4, {scaleY: 0, ease: Power1.easeOut}, "branch");

增加樹葉的入場(chǎng)動(dòng)畫效果，它的參數(shù)中有 3 個(gè) 0.5，從左到右的含義分別是動(dòng)畫時(shí)長、多個(gè)葉片動(dòng)畫的間隔時(shí)長、相對(duì) branch 標(biāo)簽動(dòng)畫的延遲時(shí)間：

animation.from(".branch", 4, {scaleY: 0, ease: Power1.easeOut}, "branch")
    .staggerFrom(".leaves span", 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, "branch");

增加葉片變黃的動(dòng)畫效果：

animation.from(".branch", 4, {scaleY: 0, ease: Power1.easeOut}, "branch")
    .staggerFrom(".leaves span", 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, "branch")
    .to([".branch", ".leaves span"], 3, {backgroundColor: "yellow"});

增加淡出效果：

animation.from(".branch", 4, {scaleY: 0, ease: Power1.easeOut}, "branch")
    .staggerFrom(".leaves span", 0.5, {scale: 0, ease: Power1.easeOut}, 0.5, 0.5, "branch")
    .to([".branch", ".leaves span"], 3, {backgroundColor: "yellow"})
    .to([".branch", ".leaves span"], 1, {autoAlpha: 0});

修改聲明時(shí)間線的代碼，使動(dòng)畫重復(fù)播放：

let animation = new TimelineMax({repeat: -1, repeatDelay: 0.5});

大功告成！

GPU云服務(wù)器云服務(wù)器如何用css 如何用云服務(wù)器做一個(gè)個(gè)人網(wǎng)站如何用vue開發(fā)實(shí)時(shí)音視頻如何用云服務(wù)器和虛擬主機(jī)賺錢

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113930.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Gilbertat

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

GigsGigsCloud：$16/月KVM-1GB/30GB/1TB/1.6T高防/洛杉磯CN2

閱讀 3161·2021-11-22 12:01
阿里云2021金秋上云季充值返券，最高返1800元優(yōu)惠券

閱讀 3781·2021-08-30 09:46
程序猿小白應(yīng)該注意什么

閱讀 796·2019-08-30 13:48
前端每日實(shí)戰(zhàn)：134# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作一個(gè)樹枝發(fā)芽的 loader

閱讀 3230·2019-08-29 16:43
subline3 px轉(zhuǎn)rem插件（cssrem）

閱讀 1674·2019-08-29 16:33
簡(jiǎn)單說 JavaScript中的tostring( ) 與 valueOf( )方法

閱讀 1864·2019-08-29 13:44
通用的js前后端交互代碼

閱讀 1427·2019-08-26 13:45
notification(瀏覽器通知)

閱讀 2242·2019-08-26 11:44

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

前端每日實(shí)戰(zhàn)：134# 視頻演示如何用 CSS 和 GSAP 創(chuàng)作一個(gè)樹枝發(fā)芽的 loader

相關(guān)文章