怎么用純CSS實現一只紙鶴

這篇文章主要介紹怎么用純CSS實現一只紙鶴，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

　　代碼解讀

　　定義dom，容器中包含6個元素，分別代表頭、頸、身體側面、翅、尾、胸：

　　<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;

　　}

　　設置紙鶴的顏色為白色：

　　.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);

　　}

　　把以上創建三角形的代碼抽象成一個模板，然后數據都改為變量，類似于調用函數的樣子：

　　.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;

　　}

　　設置透明度，以便元素疊加處有折紙效果：

　　.cranesspan{

　　filter:opacity(0.6);

　　}

　　接下來就是逐個調用生成三角形的函數創建其他三角形：

　　頸：

　　.neck{

　　--left:6;

　　--right:6;

　　--bottom:12;

　　--x:14;

　　--y:19;

　　--rotation:75;

　　}

　　身體側面：

　　.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;

　　}

　　至此，紙鶴畫完。

　　最后，增加一點交互效果，當鼠標懸停時，由等腰直角三角形變形成鶴：

　　.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實現一只紙鶴”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！