CSS3는 그라데이션 텍스트 효과를 구현합니다.

이 기사에서는 그라데이션 텍스트 효과를 얻기 위한 CSS3를 주로 공유하며, 도움이 되기를 바랍니다.

1. 방법 1: 마스크 이미지 속성

을 사용하여 텍스트 그라데이션 효과 구현

해당 HTML 코드는 다음과 같습니다.

<h2 class="text-gradient" data-text="天赐美妞">天赐美妞</h2>

HTML에 해당하는 CSS 코드는 다음과 같습니다.

.text-gradient {  
    display: inline-block;
    font-family: '微软雅黑';
    font-size: 10em;
    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 코드에서 볼 수 있습니다. .

2. 방법 2: 배경 클립 + 텍스트 채우기 색상에서 구현

방법 2에서 텍스트 그라데이션 효과

여기서 구현은 위의 것보다 간단합니다.

<h2 class="text-gradient">天赐美妞</h2>

HTML에 해당하는 CSS 코드는 다음과 같습니다.

.text-gradient {  
    display: inline-block;
    color: green;
    font-size: 10em;
    font-family: '微软雅黑';
    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 코드에서 핵심적이고 유용한 점은 실제로 마지막 세 줄입니다.

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 속성을 사용하지만, 구조가 간단하고 사용하기 쉽습니다. 제어, 색상 선택 및 제어도 더 정확하고 이해하기 쉽습니다. 개인적으로는 2번 방법을 추천드립니다.

3. 결론

현재 웹킷 핵심 브라우저에서는 text-fill-color 및 마스크 이미지 속성을 지원하는 것으로 보이므로 두 데모 페이지는 Chrome 또는 Safari에서만 볼 수 있습니다. IE에서는 말할 것도 없고 Firefox 브라우저에서는 단색입니다.

그러나 텍스트 그라데이션 자체는 장식적인 기능이므로 점진적인 향상의 원칙에 따라 실제 프로젝트에서 과감하게 사용할 수 있습니다. 원래 기능에 영향을 주지 않으면서 몇 줄의 CSS 코드로 점점 인기가 높아지는 Chrome 브라우저에서 더 나은 시각적 경험을 제공할 수 있습니다.

관련 권장 사항:

js 색상 그라디언트 코드 획득 구현

javascript 계산 그라디언트 색상 예제 공유

css3 선형 그라디언트 입력 예제 공유

위 내용은 CSS3는 그라데이션 텍스트 효과를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!