如何使用纯CSS实现一把剪刀的效果
导读：源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义dom，容器中包含2个.half元素，各表示剪刀的半边，它的子元素handle表示刀柄，bl...
源代码下载
https://github.com/comehope/front-end-daily-challenges
代码解读
定义dom，容器中包含2个.half元素，各表示剪刀的半边，它的子元素handle表示刀柄，blade表示刀，最后的.joint表示连接左右两部分铆钉：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
}
定义容器尺寸，其中outline是辅助线：
.scissors{
width:21em;
height:7em;
outline:1pxdashed;
}
定义半边剪刀的尺寸，其中outline是辅助线：
.scissors{
position:relative;
}
.half{
position:absolute;
width:inherit;
height:4em;
outline:1pxdashedred;
}
画出刀柄：
.handle{
position:absolute;
box-sizing:border-box;
width:8em;
height:inherit;
border:1emsolid#333;
border-radius:2em;
}
画出刀，用圆角属性画出了顶部的刀尖：
.blade{
position:absolute;
width:15em;
height:1em;
background-color:silver;
top:3em;
left:6em;
border-radius:001em0;
z-index:-1;
}
用伪元素在刀的底部画一个三角形，使刀与刀柄连接得更牢固：
.blade::before{
content:'';
position:absolute;
border-style:solid;
border-width:01.8em1em1.8em;
border-color:transparenttransparentsilvertransparent;
top:-1em;
left:0.2em;
}
使半边刀倾斜：
.half{
transform-origin:45%bottom;
transform:rotate(15deg);
}
利用scale()函数画出剪刀的另一半：
.half{
transform-origin:45%bottom;
transform:rotate(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;
width:0.7em;
height:0.7em;
background-color:#333;
border-radius:50%;
top:calc(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%{
transform:rotate(calc(5deg*var(--direction)))scaleY(var(--direction));
}
}
最后，别忘了删掉辅助线。本文转载自中文网
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何使用纯CSS实现一把剪刀的效果
本文地址： https://pptw.com/jishu/664531.html