CSS3 텍스트 그라데이션 애니메이션

이번에는 CSS3 텍스트 그라디언트 애니메이션을 가져왔습니다. CSS3 텍스트 그라디언트 애니메이션을 구현할 때 주의 사항은 무엇입니까?

css3 속성 사용(배경 클리핑):

<a href="http://www.php.cn/code/868.html" target="_blank">Background-clip<code><a href="http://www.php.cn/code/868.html" target="_blank">background-clip</a>: border-box || padding-box || context-box || no-clip || text: border- box || padding-box || context-box || no-clip text

제가 이번에 사용한 것은: -webkit-Background-clip:text;

Chestnuts:

1,

<style>
    .masked{
        text-align: center;
        background-image: -webkit-linear-gradient(left, #147B96, #E6D205 25%, #147B96 50%, #E6D205 75%, #147B96);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        -webkit-background-size: 200% 100%;
        -webkit-animation: masked-animation 4s infinite linear;
      }
    @-webkit-keyframes masked-animation {
         0%{ background-position: 0 0;}
         100% { background-position: -100% 0;}
    }
</style>
<p class="masked" >
        <h1>→css3文字渐变动画效果 >></h1>
</p>

지침:

-webkit-text-fill-color: transparent; (그라디언트 색상이 텍스트를 채울 수 있도록 투명한 색상을 여기에 채워야 합니다. 이를 제거하거나 다른 색상으로 채우면 효과가 나타납니다. 명확하지 않습니다)

검색 또는 개체에 텍스트 채우기 색상을 설정합니다. <' text-fill-color '> ;' text-fill-color '> 속성을 재정의합니다.

효과:

2. 로컬에서 전역 그라데이션까지 추가 배경색이 제공됩니다.

.slideShine{
     background:#871317 -webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;
     background-size:20% 100%; 
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     font-size: 36px;
     text-align: center;
     font-weight: bold;
     text-decoration: underline;
}
.slideShine {-webkit-animation: slideShine 4s linear infinite;animation: slideShine 4s linear infinite;}
@-webkit-keyframes slideShine {
     0% {
          background-position: 0 0;
        }
     100% {
          background-position: 100% 100%;
      }
 }
 @keyframes slideShine {
      0% {background-position: 0 0; }
     100% {background-position: 100% 100%; }
 }
<p class="slideShine" >→css3文字渐变动画效果 >></p>

효과:

3. Webkit 마스크를 사용하여 텍스트 그라데이션 애니메이션 구현

.text{position: relative;width: 57%;max-width:531px ;}
.text .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 0;-webkit-mask-image:  url(img/text.png);}            
.text .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine1 4s linear infinite;-webkit-animation: lightLine1 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine1{
    0%{transform:translateX(0) ;}                
    100%{transform:translateX(500%);}
}
@-webkit-keyframes lightLine1{
    0%{-webkit-transform:translateX(0) ;}                
    100%{-webkit-transform:translateX(500%) ;}
}
<p class="text" style="margin: 150px auto;">
     <img src="img/text.png" />
     <p class="mask"><i></i></p>    
</p>

효과:

4. 다색 텍스트 그라데이션 구현

.text2{position: relative;width: 63%;max-width:586px ;}
.text2 .mask{position: absolute;width: 100%;height: 95%;top: 0;left: 1px;-webkit-mask-image:  url(img/text3.png);}         
.text2 .mask i{position: absolute;height:100%;width: 20%;left:0;top:0;background:-webkit-linear-gradient(left,#561214,#febaf7 50%,#ff0 90%,#561214) no-repeat 0 0;animation: lightLine2 4s linear infinite;-webkit-animation: lightLine2 4s linear infinite;background-size:100% 100%;}
@keyframes lightLine2{
    0%{transform:translateX(0) ;}                
    100%{transform:translateX(420%);}
}
@-webkit-keyframes lightLine2{
    0%{-webkit-transform:translateX(0) ;}                
    100%{-webkit-transform:translateX(420%) ;}
}
<p class="text2" style="margin: 150px auto;">
   <img src="img/text3.png" />
   <p class="mask"><i></i></p>    
</p>

효과:

첫 번째와 두 번째 방법을 사용하는 것만으로는 여러 유형의 텍스트를 얻을 수 없으므로 <' text-fill-color '>에 정의된 색상으로 색상을 덮어쓰게 되므로 텍스트를 여러 색상으로 설정하면 대신 사진을 사용하세요. 그러나 마스크를 사용하여 텍스트를 구현하는 것은 그라데이션 무지개 효과가 좋지 않다는 것을 알 수 있습니다. -^-

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해 보세요!

추천 도서:

마우스가 그림 안으로 이동할 때 CSS3 동적 프롬프트 효과

고정 바닥글 절대 하단 방식

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