순수 CSS를 사용하여 은박지를 찢는 텍스트 효과를 얻는 방법(코드 포함)

이 기사의 내용은 은박지를 찢는 텍스트 효과를 얻기 위해 순수한 CSS를 사용하는 방법입니다. (코드 포함) 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

효과 미리보기

소스 코드 다운로드

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

코드 해석

dom을 정의하세요. 컨테이너에는 여러 하위 요소가 포함되어 있습니다. 각 하위 요소에 문자가 포함됩니다:

<div>
    <span>A</span>
    <span>W</span>
    <span>E</span>
    <span>S</span>
    <span>O</span>
    <span>M</span>
    <span>E</span>
</div>

컨테이너 크기 정의:

body {
  margin: 0;
  height: 100vh;
}

.text {
  width: 100%;
  height: 100%;
}

하위 요소의 레이아웃 설정:

.text {
  display: flex;
  justify-content: space-between;
}

.text span {
    width: 100%;
}

텍스트 스타일 정의:

.text span {
    color: darkslategray;
    background-color: rgb(127, 140, 141);
    font-family: serif;
    font-size: 12vmin;
    text-shadow: 1px 1px 1px white;
    display: flex;
    align-items: center;
    justify-content: center;
}

텍스트 배경의 그라데이션 색상 설정, 홀수 -숫자 텍스트와 짝수 텍스트 텍스트의 그라데이션 방향이 반대입니다.

.text span:nth-child(odd) {
    background: linear-gradient(
        to bottom,
        rgba(127, 140, 141, 0.2) 0%, 
        rgba(127, 140, 141, 0) 33%, 
        rgba(127, 140, 141, 0.7) 66%, 
        rgba(127, 140, 141, 0.2) 100%
    );
}

.text span:nth-child(even) {
    background: linear-gradient(
        to top,
        rgba(127, 140, 141, 0.2) 0%, 
        rgba(127, 140, 141, 0) 33%, 
        rgba(127, 140, 141, 0.7) 66%, 
        rgba(127, 140, 141, 0.2) 100%
    );
}

단어 사이에 구분선을 추가합니다. 첫 번째 텍스트 앞에 구분선을 추가할 필요가 없습니다.

.text span {
    position: relative;
}

.text span:not(:first-child)::before {
    content: '';
    position: absolute;
    width: 10px;
    height: 90%;
    background-color: black;
    left: -5px;
    border-left: 1px solid white;
    border-radius: 50%;
}

구분선을 위쪽으로 잘못 정렬하고 다운:

.text span:not(:first-child):nth-child(odd)::before {
    top: 2%;
}

.text span:not(:first-child):nth-child(even)::before {
    bottom: 2%;
}

끝났습니다!

관련 권장 사항:

순수 CSS를 사용하여 생맥주를 연결하는 특수 효과를 얻는 방법(소스 코드 포함)

순수 CSS를 사용하여 모래시계 애니메이션 효과를 구현하는 방법

CSS 사용 방법 네트워크 연결 상태를 모니터링하는 페이지 구현

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