How to realize the effect of a pair of scissors with pure CSS
This article mainly shows you "how to use pure CSS to achieve the effect of a pair of scissors", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use pure CSS to achieve the effect of a pair of scissors" this article.
Code interpretation
Define dom. The container contains two .half elements, each representing the half of the scissors, its child element handle represents the handle, blade represents the knife, and the last .joint indicates the connection between the left and right rivets:
Centered display:
Body {
Margin:0
Height:100vh
Display:flex
Align-items:center
Justify-content:center
}
Define the container size, where outline is the guide:
.scissors {
Width:21em
Height:7em
Outline:1pxdashed
}
Define the size of the half-side scissors, where outline is the guide:
.scissors {
Position:relative
}
.half {
Position:absolute
Width:inherit
Height:4em
Outline:1pxdashedred
}
Draw the hilt:
.handle {
Position:absolute
Box-sizing:border-box
Width:8em
Height:inherit
Border:1emsolid#333
Border-radius:2em
}
Draw the knife and draw the tip at the top with the fillet attribute:
.blade {
Position:absolute
Width:15em
Height:1em
Background-color:silver
Top:3em
Left:6em
Border-radius:001em0
Z-index:-1
}
Draw a triangle at the bottom of the knife with pseudo elements to make the knife more firmly connected to the handle:
.blade:: before {
Content:''
Position:absolute
Border-style:solid
Border-width:01.8em1em1.8em
Border-color:transparenttransparentsilvertransparent
Top:-1em
Left:0.2em
}
Tilt the half knife:
.half {
Transform-origin:45%bottom
Transform:rotate (15deg)
}
Use the scale () function to draw the other half of the scissors:
.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
}
Draw the rivets that connect the left and right sides:
.joint {
Position:absolute
Width:0.7em
Height:0.7em
Background-color:#333
Border-radius:50%
Top:calc (50%-0.7em/2)
Left:45%
}
Increase the animation effect of animated mouse hover:
.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))
}
}
The above is all the content of this article "how to use pure CSS to achieve the effect of a pair of scissors". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
