CSS 색상 그라디언트 예: CSS3 텍스트 색상 그라디언트 구현 방법-CSS 튜토리얼-php.cn

CSS 색상 그라디언트 예: CSS3 텍스트 색상 그라디언트 구현 방법

不言

풀어 주다： 2018-09-08 15:40:18

원래의

18551명이 탐색했습니다.

웹을 검색할 때 일부 텍스트의 색상이 동적 그라데이션이나 정적 그라데이션 형태인 경우가 있습니다. 그렇다면 프런트엔드 웹 페이지에서 텍스트 색상의 그라데이션 효과를 어떻게 얻을 수 있을까요? CSS 색상 그라디언트 응용 프로그램에서 CSS3 텍스트 색상 그라디언트의 효과를 소개합니다.

css3 텍스트 색상 그라디언트를 구현하는 방법에는 여러 가지가 있습니다. 여기서는

css3 텍스트 색상 그라디언트 방법 1을 소개합니다. css3의 애니메이션 속성을 통해 CSS 텍스트 동적 색상 그라디언트를 구현합니다

<h2>文字颜色渐变</h2>

로그인 후 복사

h2{
    height: 60px;
    color: #f35626;
    background: coral;
    background-image: -webkit-linear-gradient(45deg,#f35626,#feab3a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-animation: hue 6s infinite linear;
}
@-webkit-keyframes hue {
    from {
        -webkit-filter: hue-rotate(0deg);
    }
    to {
        -webkit-filter: hue-rotate(-360deg);
    }
}

로그인 후 복사

효과는 다음과 같습니다. (가로채기 정적 그림이지만 실제로는 동적 @o@이므로 비교해 보겠습니다 ^-^)

CSS 색상 그라디언트 예: CSS3 텍스트 색상 그라디언트 구현 방법

Css3 텍스트 색상 그라데이션 방법 2: 마스크 이미지 속성을 사용하여 다음과 같은 정적 효과를 얻습니다. 텍스트 색상 그라데이션

<h2 class="text-gradient" data-text="文字颜色渐变">文字颜色渐变</h2>

로그인 후 복사

.text-gradient {  
    display: inline-block;
    font-family: &#39;微软雅黑&#39;;
    font-size: 5em;
    position: relative; 
}  
.text-gradient[data-text]::after {  
    content: attr(data-text);  
    color: green;  
    position: absolute;  
    left: 0;  
    z-index: 2;
    -webkit-mask-image: -webkit-gradient(linear, 0 0, 0 bottom, from(#ff0000), to(rgba(0, 0, 255, 0)));
}

로그인 후 복사

효과는 다음과 같습니다.

CSS 색상 그라디언트 예: CSS3 텍스트 색상 그라디언트 구현 방법

CSS 코드에서 볼 수 있듯이 "콘텐츠 콘텐츠 생성 기술" 외에 주로 마스크 이미지 속성을 사용하여 효과를 얻습니다. .

Css3 텍스트 색상 그라데이션 방법 3: background-clip + text-fill-color 속성을 사용하여 텍스트 색상 그라데이션의 정적 효과를 얻습니다.

<h2 class="text-gradient">文字颜色渐变效果</h2>

로그인 후 복사

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 5em;
    font-family: &#39;微软雅黑&#39;;
    background-image: -webkit-gradient(linear, 0 0, 0 bottom, from(rgba(0, 128, 0, 1)), to(rgba(51, 51, 51, 1)));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
};

로그인 후 복사

효과는 다음과 같습니다.

CSS 색상 그라디언트 예: CSS3 텍스트 색상 그라디언트 구현 방법