이 기사의 내용은 은박지를 찢는 텍스트 효과를 얻기 위해 순수한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!