這篇文章主要介紹怎么用純CSS實(shí)現(xiàn)一只紙鶴，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)服務(wù)商，為中小企業(yè)提供成都網(wǎng)站制作、成都網(wǎng)站建設(shè)服務(wù)，網(wǎng)站設(shè)計(jì)，網(wǎng)站托管維護(hù)等一站式綜合服務(wù)型公司，專業(yè)打造企業(yè)形象網(wǎng)站，讓您在眾多競爭對手中脫穎而出創(chuàng)新互聯(lián)公司。
代碼解讀
定義dom，容器中包含6個(gè)元素，分別代表頭、頸、身體側(cè)面、翅、尾、胸：
居中顯示：
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)建三角形的代碼抽象成一個(gè)模板，然后數(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);
}
接下來就是逐個(gè)調(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;
}
至此，紙鶴畫完。
最后，增加一點(diǎn)交互效果，當(dāng)鼠標(biāo)懸停時(shí)，由等腰直角三角形變形成鶴：
.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實(shí)現(xiàn)一只紙鶴”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
重慶分公司
重慶分公司
