순수 CSS를 사용하여 버튼의 호버 효과를 얻는 방법(소스 코드 첨부)

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

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom을 정의하세요. 컨테이너는 다음을 포함하는 순서가 지정되지 않은 목록입니다. 4개 버튼을 나타내는 4개 요소:

    
• home
    
• products
    
• services
    
• contact

중앙 디스플레이:

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

목록 항목 앞의 기호 제거:

ul {
    padding: 0;
    list-style-type: none;
}

버튼 테두리 및 배경 스타일 설정 배경은 그라데이션 색상을 사용하지만 방향은 다릅니다. 그라데이션 대체:

ul li {
    box-sizing: border-box;
    width: 15em;
    height: 3em;
    font-size: 20px;
    border-radius: 0.5em;
    margin: 0.5em;
    box-shadow: 0 0 1em rgba(0,0,0,0.2);
}

ul li:nth-child(odd) {
    background: linear-gradient(to right, orange, tomato);
}

ul li:nth-child(even) {
    background: linear-gradient(to left, orange, tomato);
}

버튼의 텍스트 스타일을 왼쪽 또는 오른쪽으로 번갈아 설정합니다.

ul li {
    color: white;
    font-family: sans-serif;
    text-transform: capitalize;
    line-height: 3em;
}

ul li:nth-child(odd) {
    text-align: left;
    padding-left: 10%;
}

ul li:nth-child(even) {
    text-align: right;
    padding-right: 10%;
}

버튼의 원근 효과를 설정하고 왼쪽과 오른쪽으로 번갈아 회전합니다. 이때 원근 거리는 500px입니다. , Perspective() 함수와 RotateY() 함수의 순서는 반대로 작성할 수 없습니다. 500px，注意 perspective() 函数和  rotateY() 函数的顺序不能写反：

ul li:nth-child(odd) {
    transform: perspective(500px) rotateY(45deg);
}

ul li:nth-child(even) {
    transform: perspective(500px) rotateY(-45deg);
}

为按钮增加悬停效果，使悬停时的透视距离变短为 200px

ul li:nth-child(odd):hover {
    transform: perspective(200px) rotateY(45deg);
    padding-left: 5%;
}

ul li:nth-child(even):hover {
    transform: perspective(200px) rotateY(-45deg);
    padding-right: 5%;
}

버튼에 호버 효과를 추가하여 호버 시 원근 거리를 200px, 원근 거리가 짧을수록 회전이 커질수록 더 크게 보입니다. <p></p> <pre class="brush:php;toolbar:false">ul li {     transition: 0.3s;     cursor: pointer; }</pre>마지막으로 전환을 부드럽게 하기 위한 여유 시간을 설정합니다. <p>rrreee</p>완료되었습니다! <p class="comments-box-content"></p>🎜

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