순수 CSS를 사용하여 텍스트 연결 해제 애니메이션 효과를 얻는 방법(소스 코드 첨부)-CSS 튜토리얼-php.cn

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

不言

풀어 주다： 2018-08-22 10:37:02

원래의

2334명이 탐색했습니다.

이 글의 내용은 순수 CSS를 사용하여 텍스트 연결 끊김의 애니메이션 효과를 얻는 방법에 관한 것입니다. (소스 코드 첨부) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다. .

효과 미리보기

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

소스코드 다운로드

https://github.com/comehope/front-end-daily-challenges/tree/master/012-broken-text-효과

코드 해석

dom을 정의하세요. 요소는 하나만 있고 요소에는 데이터 텍스트 속성이 있으며 속성 값은 요소 내의 텍스트와 동일합니다.

<div class="text" data-text="BREAK">BREAK</div>

로그인 후 복사

중앙 표시:

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

로그인 후 복사

그라데이션 배경색 설정:

body {
    background: linear-gradient(brown, sandybrown);
}

로그인 후 복사

Set 텍스트의 글꼴 크기:

.text {
    font-size: 5em;
    font-family: "arial black";
}

로그인 후 복사

의사 요소를 사용하여 텍스트 추가:

.text {
    position: relative;
}

.text::before,
.text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    color: lightyellow;
}

로그인 후 복사

왼쪽 텍스트의 마스크 설정:

.text::before {
    background-color: darkgreen;
    clip-path: polygon(0 0, 60% 0, 30% 100%, 0 100%);
}

로그인 후 복사

오른쪽 텍스트의 배경과 마스크 설정:

.text::after {
    background-color: darkblue;
    clip-path: polygon(60% 0, 100% 0, 100% 100%, 30% 100%);
}

로그인 후 복사

마우스를 위로 이동하면 마스크된 텍스트가 양쪽으로 오프셋됩니다.

.text::before,
.text::after {
    transition: 0.2s;
}

.text:hover::before {
    left: -0.15em;
}

.text:hover::after {
    left: 0.15em;
}

로그인 후 복사

원본 텍스트와 의사 요소를 포함한 보조 요소의 배경색 숨기기:

.text {
    color: transparent;
}

.text::before {
    /*background-color: darkgreen;*/
}

.text::after {
    /*background-color: darkblue;*/
}

로그인 후 복사

양쪽 텍스트에 기울어짐 효과 추가:

.text:hover::before {
    transform: rotate(-5deg);
}

.text:hover::after {
    transform: rotate(5deg);
}

로그인 후 복사

괜찮습니다. -텍스트 높이 조정:

.text:hover::before {
    top: -0.05em;
}

.text:hover::after {
    top: 0.05em;
}

로그인 후 복사

끝났습니다!