1、如何使用css和gsap實(shí)現(xiàn)樹枝發(fā)芽的loader動(dòng)畫源代碼下載 代碼解讀 定義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; displ

2、ay: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è)置葉片的尺寸和和背景色彩： .leavess

3、pan width:2.5em; height:2.5em; background-color:limegreen; 設(shè)置左右葉片的各自樣式： .leavesspan:nth-child(odd) border-bottom-left-radius:3em; border-top-right-radius:3em; transform-origin:rightbottom; align-self:flex-start; .leavesspan:nth-child(even) border-bottom-right-radius:3em; border-top-left-radius:3em;

4、transform-origin:leftbottom; align-self:flex-end; 至此，靜態(tài)效果繪制完成，接下來開頭寫動(dòng)畫腳本。 引入gsap庫： 聲明一個(gè)時(shí)光線對象： letanimation=newtimelinemax(); 增強(qiáng)樹枝的入場動(dòng)畫效果，并為這個(gè)動(dòng)畫設(shè)置一個(gè)標(biāo)簽branch： animation.from(&39;.branch&39;,4,scaley:0,ease:power1.easeout,&39;branch&39;); 增強(qiáng)樹葉的入場動(dòng)畫效果，它的參數(shù)中有3個(gè)0.5，從左到右的含義分離是動(dòng)畫時(shí)長、多個(gè)葉片動(dòng)畫的間隔

5、時(shí)長、相對branch標(biāo)簽動(dòng)畫的延遲時(shí)光： animation.from(&39;.branch&39;,4,scaley:0,ease:power1.easeout,&39;branch&39;) .staggerfrom(&39;.leavesspan&39;,0.5,scale:0,ease:power1.easeout,0.5,0.5,&39;branch&39;); 增強(qiáng)葉片變黃的動(dòng)畫效果： animation.from(&39;.branch&39;,4,scaley:0,ease:power1.eas

6、eout,&39;branch&39;) .staggerfrom(&39;.leavesspan&39;,0.5,scale:0,ease:power1.easeout,0.5,0.5,&39;branch&39;) .to(&39;.branch&39;,&39;.leavesspan&39;,3,backgroundcolor:&39;yellow&39;); 增強(qiáng)淡出效果： animation.from(&39;.branch&39;,4,scaley:0,ease:power1.easeout,&39;branch&39;) .staggerfrom(&39;.leavesspan&39;,0.5,scale:0,ease:power1.easeout,0.5,0.5,&39;branch&39;) .to(&39;.branch&39;,&39;.leavesspan&39;,3,backgroundcolor:&39;yellow&39;) .to(&39;.branch&39;,&39;.leavesspan&39;