순수 CSS를 사용하여 가위 효과를 얻는 방법(소스 코드 첨부)

이 기사의 내용은 가위의 효과를 얻기 위해 순수한 CSS를 사용하는 방법입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. 너.

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom 정의, 컨테이너에는 2개의 .half 요소가 포함되어 있습니다. 각각은 가위의 절반을 나타내고, 하위 요소 핸들은 손잡이를 나타내고, 블레이드는 칼을 나타내며, 마지막 .joint는 왼쪽과 오른쪽 부분을 연결하는 리벳을 나타냅니다.

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

중앙 디스플레이:

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

는 컨테이너 크기를 정의합니다. 여기서 outline은 보조선입니다. outline 是辅助线：

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

定义半边剪刀的尺寸，其中 outline 是辅助线：

.scissors {
    position: relative;
}

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

画出刀柄：

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

画出刀，用圆角属性画出了顶部的刀尖：

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

用伪元素在刀的底部画一个三角形，使刀与刀柄连接得更牢固：

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

使半边刀倾斜：

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

는 반 가위의 크기를 정의합니다. 여기서 outline은 보조선입니다.

.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: 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));
    }
}

는 그립니다. 둥근 모서리 속성으로 칼을 그립니다. 칼의 위쪽 끝을 제거합니다:

rrreee

의사 요소를 사용하여 칼 아래쪽에 삼각형을 그려 칼과 손잡이를 더 단단히 연결합니다:

rrreee

만들기 칼의 절반이 기울어짐:

rrreee

scale() code> 함수를 사용하여 가위의 나머지 절반 그리기: <p>rrreee<a href="http://www.php.cn/css-tutorial-409683.html" target="_blank" title="如何使用纯CSS实现条纹错觉的动画效果（附源码）">왼쪽과 오른쪽 절반을 연결하는 리벳 그리기: </a>rrreee</p> 애니메이션 효과 추가 마우스가 떠 있습니다: <p>rrreee<a href="http://www.php.cn/css-tutorial-409474.html" target="_blank" title="如何使用css实现中国结的效果（代码）">마지막으로 보조선을 삭제하는 것을 잊지 마세요. </a></p>완료! <p class="comments-box-content"><br>관련 권장 사항: </p>🎜🎜순수 CSS를 사용하여 줄무늬 환상 애니메이션 효과를 얻는 방법(소스 코드 포함) 🎜🎜🎜🎜CSS를 사용하여 중국 매듭 효과를 얻는 방법(코드) 🎜🎜🎜🎜🎜

위 내용은 순수 CSS를 사용하여 가위 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!