怎么用纯CSS实现一只纸鹤
怎么用纯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实现一只纸鹤”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注高防服务器网行业资讯频道！
[微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。
[图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
[