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