JavaScript - モバイルCSSアニメーションの再生状態の一時停止がiOSでは機能しませんanimation-play-state

モバイル CSS アニメーションの再生状態の一時停止が、iOS では機能しません anime-play-state 画像をクリックして停止し、画像をクリックして回転を続けたいと考えています。これは Android スマートフォンでは実現できますが、iOS では、画像を初めてクリックすると、静止した動きはせずに回転し続けます。代わりに、2 回目にクリックすると...

给我你的怀抱 2017-06-26 10:53:05 0  1  1238

html5 - CSSアニメーションを使用した説明：ボールが上下に跳ね返ります（継続時間2秒、1回実行）

CSS アニメーションを使用して説明: ボールが上下に跳ね返ります (持続時間 2 秒、1 回実行)

巴扎黑 2017-05-16 13:44:36 0  2  691

背景画像にCSSフィルターを適用する方法

検索ページの背景画像として使用している JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用して設定しています。 "); 背景のみに CSS3 ぼかしフィルターを適用したいのですが、その要素だけをスタイル設定する方法がわかりません。試してみると: -webkit-filter:blur(5px); -moz-filter:blur(5px)

P粉722409996 2023-08-21 11:18:28 0  2  536

背景画像に CSS フィルター効果を使用する方法

検索ページの背景画像として使用している JPEG ファイルがあり、Backbone.js コンテキストで作業しているため、CSS を使用して設定しています。 "); 背景のみに CSS3 ぼかしフィルターを適用したいのですが、その要素だけをスタイル設定する方法がわかりません。試してみると: -webkit-filter:blur(5px); -moz-filter:blur(5p)

P粉022285768 2023-08-20 13:28:36 0  2  488

CSS アニメーション名の具体的な意味は、アニメーションの塗りつぶしモードを指します。

最近、CSS を使用して、特定のクラスの不透明度が 0% から 100% になるアニメーションを作成してみました。しかし、class="bar" のアニメーションでいくつかの問題が発生しました。 anime-fill-mode はタイトル アニメーション (不透明度を変更します) だけでなく、バ​​ー アニメーションにも適用されることがわかります。アニメーションフィルモードにアニメーション名を指定する方法はありますか?作成に使用したコードは次のとおりです。 @keyframestitle{から{-私たち

P粉441076405 2023-09-13 10:16:28 0  1  556

フロントエンド - CSS 背景画像の読み込み速度を上げる方法

私のページの 1 つでは、いくつかの CSS 背景設定を画像として使用しました。画像のサイズはおそらく数十 K です。初めて Web ページを開いたとき、これらの場所の読み込みは明らかに遅く、すべてのスタイルのように見えます。その後、画像がブラシで消えてしまいます... CSS の読み込みを高速化する方法はありますか? または...

滿天的星座 2017-06-06 09:54:29 0  6  1250

背景画像の設定、全画面表示、ページの背面に設定する方法（HTML、CSS、JavaScript）

作成中のこの単純なゲームに背景画像を設定したいのですが、画像を入力画面の中央に配置し、ページの高さと幅をすべてカバーする方法がわかりません。また、画像を背景にしてゲームを画像の上に置き、画像を一番下のレイヤーにしたいと考えています。 letcharacter=document.getElementById('character');letcharacterBottom=parseInt(window.getComputedStyle(character).getPr

P粉384244473 2024-03-22 09:53:51 0  2  390

CSSを使用してグラデーションアニメーションを作成する方法

複数の色のグラデーションを滑らかに動かしたいのですが、問題はアニメーションが滑らかではないことです。ステップごとに位置が変わるだけです。 <スタイル>.animated{幅:300px;高さ:300px;ボーダー:1pxsolidblack;アニメーション:gra5sinfinite;アニメーションの方向:逆;-webkit-animation:gra5sinfinite;-web

P粉909476457 2023-09-18 09:47:10 0  2  757

CSSとHTMLを使用して半正方形と曲線の形状を作成する方法

下の画像にあるものとまったく同じ形状を描画しようとしています。これは私のHTMLとCSSコードです。これに似た形状をしていますが、単色ではこれをマルチカラーで行う方法が少しわかりません。誰かこれを行う方法を説明してもらえますか。前もって感謝します。 .right-angle-triangle-semicircle{幅:100px;高さ:100px;background:#FFA6DF;border-top-left-radius:0;border-to

P粉797004644 2024-02-25 19:57:15 0  2  449

タブを切り替えるかブラウザを最小化すると、スワイパーの自動再生が停止します

CSSを使用してスライダーの自動再生進行を作成しました。アクティビティ クラスがページネーションに追加されると、スライダーの自動再生遅延と同じ長さの CSS アニメーションが実行されます。ブラウザのタブを切り替えたり、ブラウザを最小化したりしなければ、すべて正常に動作します。タブを切り替えるとすぐに、スライダーの自動再生が一時停止し、アニメーションが停止します。おそらく誰かがそれに影響を与える方法を知っていますか？ importSwiper,{Navigation,Pagination,Autoplay}from'swiper';consth

P粉715274052 2024-02-21 13:37:12 0  1  502

jqueryでアニメーションを停止する方法

ボックスを右に移動させるにはturnRightメソッドを実行し、ボックスを左に移動させるにはturnLeftメソッドを実行します。デフォルトではボックスは右側にあります。 {コード...}turnRightメソッドとanimateアニメーションメソッドに、console.log("end")を実行するコールバック関数を追加しました。ここで質問があります...

某草草 2017-05-16 13:43:21 0  3  578

コンテンツを圧縮せずにトランスフォームで高さをアニメートする方法

私のプロジェクトでは、jQueryslideUp() を使用して、ユーザーがボタンをクリックしたときに 200 項目のリスト内の要素を上にスライドさせました。ただし、CSS 高さアニメーションにはリフローが必要であり、アニメーションが不安定になることが知られています。アニメーションはアプリケーションの不可欠な部分であり、アニメーションをスムーズに動作させるために多くの作業を行うつもりです。 CSStransform は GPU 上で処理され、一部の最新のブラウザーではメインスレッドから外れていて、重い JS 作業が変換に影響を与えないため、CSStransform がスムーズに動作する方法であ...

P粉208469050 2024-01-01 11:51:20 0  1  438

requestAnimationFrame はフレーム レートをどのように制御しますか?

Canvas にアニメーションを実装したいのですが、アニメーションの各フレームを Sprite 上に描画し、1 つの画像に接続します。 1秒間に7コマ描きたいのですが？

仅有的幸福 2017-05-16 13:44:28 0  3  732

マウスが要素上で停止したかどうかを確認するにはどうすればよいでしょうか?

JavaScriptまたはCSSを使用して要素の上にマウスを置くのを止める方法を知りたいです。マウスを要素の上に置くと背景の色が変わるアニメーションを作成しています。また、要素の上にマウスを置くのをやめたときにアニメーションを追加したいと考えています。これどうやってするの？

P粉547420474 2024-03-31 13:28:28 0  1  374

JavaScript - Vue の過剰なフックの問題

{コード...} コピー＆ペーストして実行してください。アニメーション終了時には、公式に提供されているイベント @after-Appear を使用します。しかし、コンソールには 0 が表示されます。0 と 1 が表示されるはずです。実際、私が達成したいのは、アニメーションが終了したときに、押し続けてアニメーションを継続させることです。

滿天的星座 2017-05-18 10:59:35 0  1  588

画像の振動とアニメーションが動作しないCSS

document.addEventListener('scroll',function(){constnavbar=document.querySelector(".nav-bar");constnavbarHeight=10;const distanceFromTop=Math.abs(document.body.getBoundingClientRect().top);if(

P粉513318114 2024-04-02 20:07:39 0  1  476

JavaScript - CSS アニメーションに関する問題は何ですか?

リフローと再ペイントに関する記事 http://blog.csdn.net/ClaireKe... を読みました。いくつか疑問があります: 1. ブラウザのメカニズムでは、更新操作にはリフローと再描画が含まれる必要がありますか? 2. ページに `div { {code... などの CSS アニメーションが含まれている場合

为情所困 2017-05-18 10:49:05 0  1  665

CSS連続アニメーション

次の CSS コードがあります。問題は、アニメーションが希望どおりに動作するのですが、10 秒が経過するとリセットされてしまい、見苦しいことです。理想的には、再起動する代わりに画像をラップし、画像の左側がキャンバスから出たときに右側から戻ってくる無限アニメーションを実現したいと考えています。 @keyframesscrollRight{0%{背景の位置-x:30%;}100%{背景の位置-x:130%;}}.onrir{背景

P粉928591383 2024-03-20 12:30:42 0  1  472

アニメーション コンテンツの表示と非表示: トランジション効果を備えた HTML ページの作成

ページめくりのアニメーションを使用して、本の形でコンテンツを表示する Web サイトを作成しようとしています。各「ページ」のコンテンツに対してアニメーション化するさまざまな SVG 画像がありますが、これを行う方法がわかりません。基本的に、「ページ」ごとに HTML ファイルを作成せずに、コンテンツを希望どおりに表示または非表示にする方法はありますか?順序は少し重要です。Google に私のサイトをランダムな場所にリンクさせたくないのです。ありがとう！カルーセルを考えていますが、スライドショーはページ全体であり、アニメーションコンテンツ、アニメーショントランジションをサポートしており、テキスト...

P粉674757114 2023-09-10 17:41:45 0  1  672

Lottie アニメーションが localhost サーバーには正しく読み込まれるのに、展開サーバーには正しく読み込まれないのはなぜですか?

問題は、すべての Lottie アニメーションがローカルホスト サーバーに読み込まれることですが、Web アプリがデプロイされると、アニメーションが読み込まれず、コンソールにいくつかのエラーが表示されることです。アニメーション ファイルは .json ファイルです。私のプロジェクトは次の jsReact プロジェクトです。 Lottie へのリンク: https://lottiefiles.com/ しかし、デプロイメントサーバー (vercel) を開くと、アニメーションのロードに失敗し、コンソールにいくつかのエラーが表示されます。この問題はどうすれば解決できますか?

P粉662614213 2024-03-29 12:05:35 0  2  459