フロントエンド-テキストループスクロール再生

方法1

一、index.html

    
    
    
    
    

	
		 ： marquee 
	

二、属性:

onMouseOver=“this.stop()”

マウスがこの領域に移動したときにスクロールを停止するように設定します.

onMouseOut=“this.start()”

マウスがこの領域から移動したときにスクロールを続けるように設定します.

align

(ラベルの中身の作り方)
absbottom:絶対下揃え
absmiddle:絶対中央揃え
texttop:トップライン整列
トップ:上揃え
ベースライン:ベースライン位置合わせ
bottom:下揃え(デフォルト)
middle:中央揃え
left:左揃え
right:右揃え

behavior

(スクロールの設定方法)
scroll:一端から他端にスクロールし、循環スクロールを表します.
slide:一端から他端にスクロールし、重複しないことを示します.
Alternate:両端間をスクロールすることを示します.

bgcolor

(アクティブ字幕の背景色を設定)
RGB:rgb(0,0,255)
色名:red
16進法:#5 C 7 C 99

direction

(字幕のスクロール方向を設定)
up:上へ
down:下へ
left:左へ
right:右

height

(字幕の高さを設定)

width

(アクティブ字幕の幅を設定)

hspace

(アクティブ字幕内の位置が親コンテナの水平枠線からの距離を設定)

vspace

(アクティブ字幕の位置が親コンテナの垂直枠線からの距離を設定します)

loop

(スクロール回数を設定し、loop=-1がスクロールし続けることを示し、デフォルトは-1)

scrollamount

(アクティブ字幕のスクロール速度、単位pixelsを設定)

scrolldelay

(アクティブ字幕スクロール2回間の遅延時間、単位millisecond、ミリ秒を設定)

方法2

一、index.html

    
    
    
    
    


	

    	

        	 ： CSS 
    	
    

二、属性

animation

animation-name:animation-nameの値はデフォルトでnoneであり、アニメーションはありませんので、存在する必要があります.
animation-duration:(アニメーションを1回実行するのに要する時間)animation-durationの値はデフォルトで0であり、アニメーションはありません.
animation-delay:(アニメーションの開始前の遅延時間)の値は秒(s)またはミリ秒(ms)で、デフォルトは0で、遅延はありません.
animation-timing-function:(アニメーションがどのような動作軌跡で1サイクルを完了するか)値は、ベッセル曲線で最も一般的な値です.
(1)easeは、アニメーションを低速で開始し、加速し、最後に終了する前に遅くなることを示し、デフォルト値です.
(2)linear:アニメーションの最初から最後までの速度が同じであることを示します.
(3)ease-in:アニメーションが低速で始まることを示す.
(4)ease-out:アニメーションが低速で終わることを示す.
(5)ease-in-out:アニメーションが低速で開始および終了することを示す.
(6)3回のベッセル関数を直接使用することができ,ウェブサイトはhttp://cubic-bezier.com.
animation-iteration-count:(アニメーション再生回数)アトリビュート値は2つあります.
(1)直接数字を書き、アニメーションを再生したい回数をカスタマイズします.
(2)infinite:アニメーションのワイヤレスループ再生を設定します.
animation-fill-mode:(エレメントアニメーションの終了後または開始していないエレメントスタイルを定義する)プロパティ:
(1)既定値はnoneで、アニメーションの終了時や開始時に要素にスタイルを追加することはありません.
(2)forwards:アニメーションが終了すると、要素が現在のスタイルに直接接続されることを示します.
(3)backwards:アニメーション遅延時間要素でキーフレーム内のfromの属性値またはtoの属性値を表す(animation-directionがreverseまたはalternate-reverseの場合)
アニメーション-direction:(アニメーションを順番に逆再生するかどうか)プロパティ:
(1)既定値はnormalで、アニメーションは正常に再生されます.(アニメーションが1回しか再生されない場合、このアトリビュートは無効です)
(2)reverse:アニメーションの逆再生を表します.
(3)alternate:アニメーションが奇数回再生されたときは順方向再生,偶数回再生されたときは逆方向再生であることを示す.
(4)alternate-reverse::アニメーションが奇数回再生されたときは逆再生、偶数回再生されたときは順再生であることを示す.

keyframes

(アニメーションを作成)
0%:開始
100%:終了
(0%と100%以外は自分で勝手に書くことができます.例えば:38%、50%、66%)
translate X:X軸方向に移動する位置を示す
-webkit-Googleブラウザのカーネルを表示します.カーネルを追加しないと、Googleブラウザで効果が失効する可能性があります.