CSSを使用してテキストをスクロールするサンプルコード

この記事の内容は CSS スクロールテキストのサンプルコードです。必要な方は参考にしていただければ幸いです。

レンダリング

画像の説明: 矢印は、背景が白のパーツを指し、左から右にスクロールします。 (IE には適用されません)

コード

html

<div>   
例子：
<div>
<span>滚动的文字，我是滚动的文字</span>
</div>
</div>

CSS

.box {
    height: auto;
    background-color: blue;
}

.box-text{
    color: white;
    background: -ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slidetounlock 3s infinite;
    -webkit-animation: slidetounlock 3s infinite;
}

@-webkit-keyframes slidetounlock{
    0%  {
        background-position:-200px 0
    }
    
    100% {
        background-position:200px 0
    }
}

実装原理

1. アニメーション効果

@-webkit-keyframes

このアニメーションでは、背景の位置が変更されています (テキストの位置に注意してください)

2. 背景全体ではなくテキストを選択する理由。背景？

background-clip: text;
作用：指定绘图区的背景
除了text外，还包括 ：border-box|padding-box|content-box;三个属性

3. 小さな変化の効果を達成するにはどうすればよいですか?

gradient()

関数: グラデーション
実際の効果を見てわかるように、白い部分の外側はすべてグレーになり、白に近づくほど白くなります。

-ms-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));

説明: グラデーション タイプ、線形グラデーション (z=x*y)
to left:
右から左へのグラデーションを設定します。同等: 270deg
to right:
は、左から右へのグラデーションを設定します。同等: 90deg
to top:
下から上へのグラデーションを設定します。以下と同等: 0deg
tobottom:
は上から下へのグラデーションを設定します。相当：180度これはデフォルト値であり、空白のままにするのと同じです。

これにより、グラデーション フォント部分が実現されます。

-webkit-text-fill-color: transparent;

フォントの塗りつぶしの色: 背景から継承されるため、フォントの色は、設定されたボックス テキストの背景色ではなく、設定されたボックス テキストの背景になります。ボックス。

アニメーションを追加してループで動かすだけで完了します。

以上がCSSを使用してテキストをスクロールするサンプルコードの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。