您好,登錄后才能下訂單哦!
這篇文章主要介紹怎么用純CSS實現(xiàn)一只紙鶴,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!
代碼解讀
定義dom,容器中包含6個元素,分別代表頭、頸、身體側(cè)面、翅、尾、胸:
<divclass="cranes">
<spanclass="head"></span>
<spanclass="neck"></span>
<spanclass="side"></span>
<spanclass="wing"></span>
<spanclass="tail"></span>
<spanclass="belly"></span>
</div>
居中顯示:
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:dodgerblue;
}
定義容器尺寸:
.cranes{
width:52em;
height:50em;
font-size:7px;
}
設(shè)置紙鶴的顏色為白色:
.cranes{
color:white;
}
畫出頭部:
.cranes{
position:relative;
}
.head{
border-left:13emsolidtransparent;
border-right:6emsolidtransparent;
border-bottom:2emsolid;
position:absolute;
left:0;
top:21;
transform:rotate(-5deg);
}
把以上創(chuàng)建三角形的代碼抽象成一個模板,然后數(shù)據(jù)都改為變量,類似于調(diào)用函數(shù)的樣子:
.cranesspan{
border-left:calc(var(--left)*1em)solidtransparent;
border-right:calc(var(--right)*1em)solidtransparent;
border-bottom:calc(var(--bottom)*1em)solid;
position:absolute;
transform:rotate(calc(var(--rotation)*1deg));
left:calc(var(--x)*1em);
top:calc(var(--y)*1em);
}
.head{
--left:13;
--right:6;
--bottom:2;
--x:0;
--y:21;
--rotation:-5;
}
設(shè)置透明度,以便元素疊加處有折紙效果:
.cranesspan{
filter:opacity(0.6);
}
接下來就是逐個調(diào)用生成三角形的函數(shù)創(chuàng)建其他三角形:
頸:
.neck{
--left:6;
--right:6;
--bottom:12;
--x:14;
--y:19;
--rotation:75;
}
身體側(cè)面:
.side{
--left:1.5;
--right:11.5;
--bottom:20;
--x:18.8;
--y:15.1;
--rotation:20;
}
翅:
.wing{
--left:18.7;
--right:30;
--bottom:8;
--x:6.7;
--y:9.2;
--rotation:-41.9;
}
尾:
.tail{
--left:18.6;
--right:7.7;
--bottom:3.9;
--x:19.6;
--y:38.1;
--rotation:-126.5;
}
胸:
.belly{
--left:6.2;
--right:1.8;
--bottom:11.5;
--x:17.5;
--y:27.8;
--rotation:-99;
}
至此,紙鶴畫完。
最后,增加一點交互效果,當(dāng)鼠標懸停時,由等腰直角三角形變形成鶴:
.cranes:hoverspan{
animation:appear1sease-in;
}
@keyframesappear{
from{
border-left:3emsolidtransparent;
border-right:3emsolidtransparent;
border-bottom:3emsolid;
position:absolute;
transform:rotate(0deg);
left:calc((52em-3em)/2);
top:calc((50em-3em)/2);
}
}
以上是“怎么用純CSS實現(xiàn)一只紙鶴”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。