Shulou(Shulou.com)06/01 Report--

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!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.