介绍 & lt; div类=癱ranes"比;
& lt;跨类=癶ead"祝辞& lt;/span>
& lt;跨类=皀eck"祝辞& lt;/span>
& lt;跨类=皊ide"祝辞& lt;/span>
& lt;跨类=皐ing"祝辞& lt;/span>
& lt;跨类=皌ail"祝辞& lt;/span>
& lt;跨类=癰elly"祝辞& lt;/span>
& lt;/div> 身体{
保证金:0;
身高:100 vh;
显示:flex;
对齐项目:中心;
justify-content:中心;
background - color: dodgerblue;
} 。起重机{
宽度:52 em;
高度:50 em;
字体大小:7 px;
} 。起重机{
颜色:白色;
} 。起重机{
位置:相对;
}
.head {
border-left: 13 em固体透明;
边境:6 em固体透明;
边界底部:2 em固体;
位置:绝对的;
左:0;
上图:21;
变换:旋转(5度);
} 。起重机跨度{
border-left:钙(var((左)* 1 em)固体透明;
边境:钙(var (——) * 1 em)固体透明;
边界底部:钙(var(底部)* 1 em)固体;
位置:绝对的;
变换:旋转(calc (var(旋转)* 1度));
左:钙(var (- x) * 1 em);
上图:钙(var (y) * 1 em);
}
.head {
——左:13;
,对吧:6;
——底部:2;
——x: 0;
——y: 21;
——旋转:5;
} 。起重机跨度{
过滤器:透明度(0.6);
} 。脖子{
——左:6;
,对吧:6;
——底部:12个;
——x: 14;
——y: 19;
——旋转:75;
} 。一边{
——左:1.5;
——右:11.5;
——底部:20;
——x: 18.8;
——y: 15.1;
——旋转:20;
} 。翼{
——左:18.7;
,对吧:30;
——底部:8;
——x: 6.7;
——y: 9.2;
——旋转:-41.9;
} 。尾巴{
——左:18.6;
——右:7.7;
——底部:3.9;
——x: 19.6;
——y: 38.1;
——旋转:-126.5;
} 。腹部{
——左:6.2;
——右:1.8;
——底部:11.5;
——x: 17.5;
——y: 27.8;
——旋转:-99;
} 。鹤:悬停跨度{
动画:1 s在出现;
}
{@keyframes出现
从{
border-left: 3 em固体透明;
边境:3 em固体透明;
边界底部:3 em固体;
位置:绝对的;
变换:旋转(0度);
左:钙((52 em - 3 em)/2);
上图:钙(em (50 em - 3)/2);
}
}
这篇文章主要介绍了怎么使用纯CSS实现一只纸鹤,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
效果预览
源代码下载https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom,容器中包含6个元素,分别代表头,颈,身体侧面,翅,尾,胸:
居中显示:
定义容器尺寸:
设置纸鹤的颜色为白色:
画出头部:
把以上创建三角形的代码抽象成一个模板,然后数据都改为变量,类似于调用函数的样子:
设置透明度,以便元素叠加处有折纸效果:
接下来就是逐个调用生成三角形的函数创建其他三角形:
颈:
身体侧面:
翅:
尾:
胸:
至此,纸鹤画完。
最后,增加一点交互效果,当鼠标悬停时,由等腰直角三角形变形成鹤:
感谢你能够认真阅读完这篇文章,希望小编分享怎么使用纯CSS实现一只纸鹤内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
