怎么用纯CSS实现一只纸鹤

居中显示：

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实现一只纸鹤”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！