ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSを使用してテキストをスクロールするサンプルコード
この記事の内容は CSS スクロールテキストのサンプルコードです。必要な方は参考にしていただければ幸いです。
画像の説明: 矢印は、背景が白のパーツを指し、左から右にスクロールします。 (IE には適用されません)
<div> 例子: <div> <span>滚动的文字,我是滚动的文字</span> </div> </div>
.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 サイトの他の関連記事を参照してください。