How to use pure CSS to achieve the effect of a pair of scissors (source code attached)-CSS Tutorial-php.cn

How to use pure CSS to achieve the effect of a pair of scissors (source code attached)

不言

Release： 2018-09-10 15:38:56

Original

2537 people have browsed it

The content of this article is about how to use pure CSS to achieve the effect of a pair of scissors (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. helped.

Effect preview

How to use pure CSS to achieve the effect of a pair of scissors (source code attached)

Source code download

https://github.com/comehope/front- end-daily-challenges

Code Interpretation

Define dom, the container contains 2 .half elements, each representing half of the scissors, its sub-element handle represents the handle, and blade represents the knife. The last .joint represents the rivet connecting the left and right parts:

<figure>
    <div>
        <span></span>
        <span></span>
    </div>
    <div>
        <span></span>
        <span></span>
    </div>
    <div></div>
</figure>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Copy after login

Defines the container size, where outline is the auxiliary line:

.scissors {
    width: 21em;
    height: 7em;
    outline: 1px dashed;
}

Copy after login

Define the size of the half scissors, where outline is the auxiliary line:

.scissors {
    position: relative;
}

.half {
    position: absolute;
    width: inherit;
    height: 4em;
    outline: 1px dashed red;
}

Copy after login

Draw the handle:

.handle {
    position: absolute;
    box-sizing: border-box;
    width: 8em;
    height: inherit;
    border: 1em solid #333;
    border-radius: 2em;
}

Copy after login

Draw the knife, and use the fillet attribute to draw the top The tip of the knife:

.blade {
    position: absolute;
    width: 15em;
    height: 1em;
    background-color: silver;
    top: 3em;
    left: 6em;
    border-radius: 0 0 1em 0;
    z-index: -1;
}

Copy after login

Use pseudo elements to draw a triangle on the bottom of the knife to make the knife and the handle more firmly connected:

.blade::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 1.8em 1em 1.8em;
    border-color: transparent transparent silver transparent;
    top: -1em;
    left: 0.2em;
}

Copy after login

Make half of the knife tilted:

.half {
    transform-origin: 45% bottom;
    transform: rotate(15deg);
}

Copy after login

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;
}

Copy after login

Draw the rivets connecting the left and right halves:

.joint {
    position: absolute;
    width: 0.7em;
    height: 0.7em;
    background-color: #333;
    border-radius: 50%;
    top: calc(50% - 0.7em / 2);
    left: 45%;
}

Copy after login

Increase the animation effect when the mouse is hovering :

.scissors:hover .half {
    animation: cut 2s ease-out;
}

@keyframes cut {
    20%, 60% {
        transform: rotate(calc(30deg * var(--direction))) scaleY(var(--direction));
    }

    40%, 80% {
        transform: rotate(calc(5deg * var(--direction))) scaleY(var(--direction));
    }
}

Copy after login

Finally, don’t forget to delete the auxiliary lines.

Done!

Related recommendations:

How to use pure CSS to achieve the striped illusion animation effect (with source code)

How to use css to achieve the Chinese knot Effect (code)

The above is the detailed content of How to use pure CSS to achieve the effect of a pair of scissors (source code attached). For more information, please follow other related articles on the PHP Chinese website!