前端日常实战：131#视频演示如何用纯CSS制作一把剪刀
时间：2023-03-31 12:27:15
CSS
效果预览点击右侧“点击预览”按钮在当前页面预览，点击链接预览全文屏幕。https://codepen.io/comehop??e/pen/GXyGpZ互动视频本视频为互动视频，您可以随时暂停视频，编辑视频中的代码。请使用chrome、safari、edge打开观看。https://scrimba.com/p/pEgDAM/cwkQWtz源码下载日常前端实战系列完整源码请到github下载：https://github.com/comehop??e/front-end-daily-挑战代码解释定义dom，容器包含2个.half元素，每个元素代表剪刀的一半，它的子元素handle代表手柄，blade代表刀，最后一个.joint代表连接左右部分的铆钉:
中心显示：正文{保证金：0;高度：100vh；显示：弹性；对齐项目：居中；justify-content:center;}定义容器的大小，其中outline为辅助线：.scissors{width:21em;高度：7em；outline:1pxdashed;}定义半边剪刀的尺寸，Outline为辅助线：.scissors{position:relative;}.half{position:absolute;宽度：继承；高度：4em；outline:1pxdashedred;}画柄:.handle{posit离子：绝对的；框大小：边框框；宽度：8em；身高：继承；边框：1em实心#333；border-radius:2em;}画刀，画刀尖，属性为rounded:.blade{position:absolute;宽度：15em；高度：1em；背景色：银色；顶部：3em；左：6em；边界半径：001em0；z-指数：-1；在刀的底部画一个三角形，使刀和刀柄之间的连接更牢固：.blade::before{content:'';位置：绝对；边框样式：实心；边框宽度：01.8em1em1.8em；border-color：透明透明银色透明；顶部：-1em；left:0.2em;}使半刃刀倾斜：.half{transform-origin:45%bottom;transform:rotate(15deg);}使用scale()函数绘制另一半剪刀：.half{transform-origin:45%bottom;变换：旋转（calc（15deg*var（--direction）））scaleY（var（--direction））;}.half：nth-??child（1）{--direction：1;top:0;}.half:nth-child(2){--direction:-1;top:-1em;}画出连接左右两半的铆钉：.joint{position:absolute;宽度：0.7em；高度：0.7em；nd色：#333；边界半径：50%；顶部：计算（50%-0.7em/2）；left:45%;}鼠标悬停时添加动画效果：.scissors:hover.half{animation:cut2sease-out;}@keyframescut{20%,60%{transform:rotate(calc(30deg*var(--direction)))scaleY(var(--direction));}40%,80%{变换:旋转(calc(5deg*var(--direction)))scaleY(var(--direction));最后，别忘了删除辅助线，大功告成！
