这篇文章主要为大家展示了“怎么用纯CSS实现一把剪刀的效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“怎么用纯CSS实现一把剪刀的效果”这篇文章吧。
创新互联公司是一家集网站建设,盐边企业网站建设,盐边品牌网站建设,网站定制,盐边网站建设报价,网络营销,网络优化,盐边网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。
代码解读
定义dom,容器中包含2个.half元素,各表示剪刀的半边,它的子元素handle表示刀柄,blade表示刀,最后的.joint表示连接左右两部分铆钉:
<figureclass="scissors">
<divclass="half">
<spanclass="handle"></span>
<spanclass="blade"></span>
</div>
<divclass="half">
<spanclass="blade"></span>
<spanclass="handle"></span>
</div>
<divclass="joint"></div>
</figure>
居中显示:
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));
}
}
以上是“怎么用纯CSS实现一把剪刀的效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站题目:怎么用纯CSS实现一把剪刀的效果
URL网址:https://www.cdcxhl.com/article24/pidsje.html
成都网站建设公司_创新互联,为您提供、手机网站建设、App开发、ChatGPT、品牌网站制作、网站制作
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联