怎么用纯CSS实现一只纸鹤
这篇文章主要介绍怎么用纯CSS实现一只纸鹤，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！
创新互联公司网站建设服务商，为中小企业提供成都网站制作、成都网站建设服务，网站设计，网站托管维护等一站式综合服务型公司，专业打造企业形象网站，让您在众多竞争对手中脱颖而出创新互联公司。
代码解读
定义dom，容器中包含6个元素，分别代表头、颈、身体侧面、翅、尾、胸：
居中显示：
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实现一只纸鹤”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！
本文标题：怎么用纯CSS实现一只纸鹤
本文路径：http://ybzwz.com/article/ppeogh.html
