순수 CSS를 사용하여 금속 광택이 있는 3차원 버튼의 애니메이션 효과를 얻는 방법(소스 코드 첨부)

이 글의 내용은 순수한 CSS를 사용하여 금속 광택이 있는 3차원 버튼의 애니메이션 효과를 구현하는 방법에 대한 것입니다(소스 코드 첨부). 도움이 필요한 친구들이 참고할 수 있습니다. 그것이 당신에게 도움이 되기를 바랍니다.

효과 미리보기

소스코드 다운로드

https://github.com/comehope /front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-events

코드 해석

dom에서 컨테이너 정의: # 🎜🎜#

<div class="box">BUTTON</div>

컨테이너가 중앙에 표시됩니다.

html, body {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: skyblue;
}

버튼의 2D 스타일을 설정하여 버튼 크기 조정을 용이하게 하기 위해 변수가 사용됩니다. #🎜🎜 #

.box {
    background: linear-gradient(to right, gold, darkorange);
    color: white;
    --width: 250px;
    --height: calc(var(--width) / 3);
    width: var(--width);
    height: var(--height);
    text-align: center;
    line-height: var(--height);
    font-size: calc(var(--height) / 2.5);
    font-family: sans-serif;
    letter-spacing: 0.2em;
    border: 1px solid darkgoldenrod;
    border-radius: 2em;
}

버튼의 3D 스타일 설정 스타일:

.box {
    transform: perspective(500px) rotateY(-15deg);
    text-shadow: 6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 0 0 5px rgba(0, 0, 0, 0.2);
}

버튼의 마우스 오버 애니메이션 효과 정의:

.box:hover {
    transform: perspective(500px) rotateY(15deg);
    text-shadow: -6px 3px 2px rgba(0, 0, 0, 0.2);
    box-shadow: -2px 0 0 5px rgba(0, 0, 0, 0.2);
}

.box {
    transition: 0.5s;
}

의사 요소로 광택 추가: #🎜 🎜#

.box {
    position: relative;
}

.box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, white, transparent);
    left: 0;
}

광택 있는 애니메이션 효과 정의: # 🎜🎜#

.box::before {
    left: -100%;
    transition: 0.5s;
}

.box:hover::before {
    left: 100%;
}

마지막으로 컨테이너 외부의 콘텐츠 숨기기:

.box {
    overflow: hidden;
}

완료되었습니다!

관련 권장 사항:

순수한 CSS를 사용하여 텍스트 연결 해제 애니메이션 효과를 얻는 방법(소스 코드 포함)

#🎜🎜 # CSS를 사용하여 그라데이션 애니메이션 테두리 효과를 얻는 방법(코드 포함)

CSS와 색상 혼합 모드를 사용하여 로더 애니메이션 효과를 얻는 방법(코드 포함)

위 내용은 순수 CSS를 사용하여 금속 광택이 있는 3차원 버튼의 애니메이션 효과를 얻는 방법(소스 코드 첨부)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!