ホームページ >ウェブフロントエンド >htmlチュートリアル >自動テキストトランジション効果を実現する方法_html/css_WEB-ITnose
自動テキストトランジション効果を実現する方法_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:26:512599ブラウズ
http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_transition
上記の W3C Web サイトの移行効果には、以下が必要ですマウスの動き 一番上に行くと変わります。
http://www.cheapmortgages.com/
ディスカッションに返信(解決策)
<pre id="test">
テスト済み
<pre id="test">
測定済み
用事があるので、今夜チェックしてみます。文字を 1 つずつ出力するのは...
ヒントを教えてください。これは div です。CSS スタイルのオーバーフローは非表示になっています
JS を使用して幅を変更し、効果を滑らかにするために、window.requestAnimationFrame を使用できます。 (幅を変更する関数) リフレッシュ レートを画面と同じにする
効果を実現するには、JS を介して幅を変更します。 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにすることができます
このWebサイトのソースコードを見たところ、このWebサイトで使用されている方法は、白い背景のdivでカバーしてからです。効果を実現するには、それを移動します。実装はもう少し複雑です
ヒントを与えておきます。これは div であり、CSS スタイルのオーバーフローは非表示になっています
滑らかにするために、その効果は JS を通じて幅を変更することで実現されます。 、 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにすることができます。 このWebサイトで使用されている方法は、白のdivで覆うことです。背景を追加してから移動して効果を実現します。実装は少し複雑です
自動再生については、JS コードを div コードの下に配置し、window.requestAnimationFrame (幅を変更する関数) を記述するだけです。
また、JS を使用したくない場合は、CSS3 アニメーションを使用できますが、下位バージョンのブラウザとの互換性は良くありません
<pre id="test">
ヒントを与えます、これはdiv、CSSスタイルのオーバーフローは非表示になります
効果はJSを通じて幅を変更することで実現され、滑らかさのために使用できます。 window.requestAnimationFrame（幅を変更する関数）を使用して、リフレッシュレートを画面と同じにします
見てみましたこのウェブサイトで使用されている方法は、白い背景の div で覆い、それを移動することです。実装はもう少し簡単です
自動の場合は。再生するには、JS コードを div コードの下に配置し、その中に window.requestAnimationFrame (幅を変更する関数) を直接記述するだけです
また、JS を使用したくない場合は、CSS3 アニメーションを使用して実現できますただし、以前のバージョンのブラウザとの互換性は良好ではありません
ありがとうございます!!!!