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 || コンテキストボックス || クリップなし || 今回使用したもの: -webkit-background-clip:text;

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>
        </p><h1 id="css-文字渐变动画效果-gt-gt">→css3文字渐变动画效果 >></h1>

手順:

-webkit-text-fill-color: 透明; (グラデーションカラーでテキストを埋めるために、ここに透明な色を入力する必要があります。これを削除したり、別の色で塗りつぶしたりすると、効果は変わります)明白ではありません)

' 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>→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>
     <img  src="/static/imghwm/default1.png" data-src="img/text.png" class="lazy" alt="css3テキストグラデーションアニメーション" >
     </p><p><i></i></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>
   <img  src="/static/imghwm/default1.png" data-src="img/text3.png" class="lazy" alt="css3テキストグラデーションアニメーション" >
   </p><p><i></i></p>    

効果:

1番目と2番目の方法だけでは複数種類のテキストを実現できないため、色はで定義された色で上書きされるため、テキストを複数の色に設定すると、代わりに画像を使用してください。ただし、マスクを使用してテキストを実装すると、グラデーション虹の効果が良くないことがわかります -^-

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、こちらをご覧ください。 php 中国語 Web サイトの他の関連記事にも注目してください。

推奨読書:

マウスが画像内に移動したときの CSS3 動的プロンプト効果

スティッキーフッターの絶対下メソッド

以上がcss3テキストグラデーションアニメーションの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。