前端日常实践：124#视频演示如何用纯CSS制作千纸鹤
时间：2023-04-05 22:37:41
HTML5
效果预览。点击右边的“点击预览”按钮可以在当前页面进行预览，点击链接可以全屏预览。https://codepen.io/comehop??e/pen/xagoYb互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cPw8eSg源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含6个元素，分别代表头部、颈部、身体侧面、翅膀、尾巴、胸部：
居中显示：body{margin:0;高度：100vh；显示：弹性；对齐项目：居中；证明内容：居中；背景颜色：dodgerblue;}定义容器尺寸：.cranes{width:52em;高度：50em；font-size:7px;}将起重机的颜色设置为白色:.cranes{color:white;}绘制头部:.cranes{position:relative;}.head{border-left:13emsolidtransparent;border-right:6emsolidtransparent;border-bottom:2emsolid;位置：绝对；左：0；顶部：21；一个模板，然后之后数据变为变量，类似于调用函数：.cranesspan{border-left:calc(var(--left)*1em)solidtransparent;border-right:calc(var(--right)*1em)solidtransparent;border-bottom:calc(var(--bottom)*1em)solid;位置：绝对；变换：旋转（计算（var（--rotation）*1deg））；左：计算（var（--x）*1em）；顶部：计算（var（--y）*1em）;}.head{--left：13;--右：6；--底部：2；--x:0;--是：21；--rotation:-5;}设置透明度，使元素叠加处有折纸效果：.cranesspan{filter:opacity(0.6);}接下来调用生成三角形的函数一个创建其他三角形：neck:.neck{--left:6;--右：6；--底部：12；--x:14;--y:19;--rotation:75;}身体一侧：.side{--left:1.5;--右：11.5；--底部：20；--x:18.8;--y:15.1;--rotation:20;}wing:.wing{--left:18.7;--右：30；--底部：8；--x:6.7;--y:9.2;--rotation:-41.9;}tail:.tail{--left:18.6;--右：7.7；--底部：3.9；--x：19.6；--y:38.1;--rotation:-126.5;}胸部：.belly{--left:6.2;--右：1.8；--底部：11.5；--x:17.5;--y:27.8;--rotation:-99;}至此纸鹤画到最后，加一点交互效果，当鼠标悬停时，由等腰直角三角形变成一只鹤：.cranes:hoverspan{animation:出现1s缓入；}@keyframes出现{from{border-left:3emsolidtransparent;border-right:3emsolidtransparent;border-bottom:3emsolid;位置：绝对；变换：旋转（0度）；左：计算（（52em-3em）/2）；顶部：计算（（50em-3em）/2）；}你完成了！
