189 8069 5689

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


名称栏目:怎么用纯CSS实现一只纸鹤
标题URL:http://cdxtjz.cn/article/ppeogh.html

其他资讯