집 >웹 프론트엔드 >JS 튜토리얼 >텍스트 애니메이션 효과 코드의 이미지

텍스트 애니메이션 효과 코드의 이미지

Mary-Kate Olsen원래의: 2025-01-10 14:28:41271검색

Image in the Text animation effect code

<!DOCTYPE html>
<html lang="ko">
<머리>
    <meta charset="UTF-8">
    <메타 이름="뷰포트" 콘텐츠="너비=
    , 초기 규모=1.0">
    <title>이미지 내부 텍스트 효과</title>

    <스타일>
         @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap');


         몸{
            여백: 0;
            디스플레이: 플렉스;
            내용 정당화: 센터;
            항목 정렬: 중앙;
            높이: 100vh;
            배경: 선형 그라데이션(135deg, #0f0c29, #302b63, #24243e);
            오버플로: 숨김;
            /* 배경: url('./jerry.png') ; */
         }

         .text-컨테이너{
            디스플레이: 플렉스;

         }

         .편지{
            글꼴 계열: '몬세라트', 산세리프;
            글꼴 크기: 9rem;
            글꼴 두께: 굵게;
            색상: 투명;
        배경: url('./jerry.png') 반복 없음 센터 center;
    배경 크기: 표지;
    --webkit-배경-클립:텍스트;
    배경 클립: 텍스트;
줄 높이: 1;         }











    </스타일>
</머리>
<본문>
    <div>

위 내용은 텍스트 애니메이션 효과 코드의 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

html webkit display overflow margin viewport background animation flex https

성명：

이전 기사：TanStack Router: 5의 React 라우팅의 미래다음 기사：TanStack Router: 5의 React 라우팅의 미래