CSS를 사용하여 버튼 텍스트 슬라이딩 효과를 얻는 방법

이 글은 CSS를 사용하여 버튼 텍스트 슬라이딩의 특수 효과를 구현하는 방법을 주로 소개합니다. 이는 특정 참조 값을 가지고 있습니다. 이제 필요한 친구들은 소스 코드 다운로드를 참조할 수 있습니다.

다운로드하세요. .

https://github.com/comehope/front-end-daily-challenges/tree/master/001-button-text-staggered-sliding-효과

코드 해석

DOM을 정의하고 컨테이너에 버튼을 정의하세요. 텍스트, 각 문자에는 범위가 있고 각 범위에는 값이 범위의 문자와 동일한 데이터 텍스트 속성이 있습니다:

<p class="box">
    <span data-text="B">B</span>
    <span data-text="U">U</span>
    <span data-text="T">T</span>
    <span data-text="T">T</span>
    <span data-text="O">O</span>
    <span data-text="N">N</span>
</p>

버튼 중심 정렬:

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

버튼의 크기 및 텍스트 스타일 설정:

.box {
    width: 200px;
    height: 60px;
    border: 2px solid black;
    text-align: center;
    font-size: 30px;
    line-height: 60px;
    font-family: sans-serif;
}

Button의 각 문자는 개별적으로 애니메이션이 가능하도록 인라인 블록 요소로 설정됩니다.

.box span {
    display: inline-block;
    color: blue;
}

홀수 요소는 상단에, 짝수 요소는 하단에 배치하여 버튼 컨테이너 외부에 문자를 엇갈리게 표시합니다.

.box span:nth-child(odd) {
    transform: translateY(-100%);
}

.box span:nth-child(even) {
    transform: translateY(100%);
}

의사 사용 요소는 각 문자의 복사본을 추가합니다:

.box span::before {
    content: attr(data-text);
    position: absolute;
    color: red;
}

의사 요소의 문자도 원래 요소를 기준으로 엇갈리게 표시하고 위치를 지정합니다.

.box span:nth-child(odd)::before {
    transform: translateY(100%);
}

.box span:nth-child(even)::before {
    transform: translateY(-100%);
}

버튼에 마우스 오버 스타일을 추가하고 여유 시간을 설정합니다. , 애니메이션으로 만듭니다.

.box:hover span {
    transform: translateY(0);
}

.box span {
    transition: 0.5s;
}

마지막으로 컨테이너 외부의 내용을 숨깁니다.

.box {
    overflow: hidden;
}

끝났습니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

세로 텍스트 배열을 구현하는 CSS3

웹 페이지의 줄무늬 배경 스타일을 만드는 CSS 소개

위 내용은 CSS를 사용하여 버튼 텍스트 슬라이딩 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!