chrome_html/css_WEB-ITnoseでCSS3アニメーションを実行すると【奇妙な現象】が発生する
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>HTML5</title><style type="text/css">#a3{width:50px; height:50px; background-color:#000066;margin:200px 0 0 200px;color:#FFF;}@-webkit-keyframes aa1{ 0%{-webkit-transform:rotate(0deg) scale(1,1) skew(0deg,0deg);opacity:1;} 50%{-webkit-transform:rotate(180deg) scale(2,2) skew(45deg,0deg);opacity:0;} 100%{-webkit-transform:rotate(360deg) scale(1,1) skew(0deg,0deg);opacity:1;}}@-moz-keyframes aa1{ 0%{-moz-transform:rotate(0deg) scale(1,1) skew(0deg,0deg);opacity:1;} 50%{-moz-transform:rotate(180deg) scale(2,2) skew(45deg,0deg);opacity:0;} 100%{-moz-transform:rotate(360deg) scale(1,1) skew(0deg,0deg);opacity:1;}}.a3:hover{ -webkit-animation-name:aa1; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name:aa1; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite;}.a5{ -webkit-animation-name:aa1; -webkit-animation-duration:5s; -webkit-animation-timing-function:linear; -webkit-animation-iteration-count:infinite; -moz-animation-name:aa1; -moz-animation-duration:5s; -moz-animation-timing-function:linear; -moz-animation-iteration-count:infinite;}</style></head><body><div id="a3">123456</div></body><script>var a = document.getElementById("a3");a.addEventListener("click",function(){ //alert("a5"); //a.style.cssText = "-webkit-animation-name:aa1;-webkit-animation-duration:5s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:infinite;"; a.className = "a5";});</script></html>このコードの意味は、画面上の小さな四角形 (DIV) をクリックすると、小さな四角形が自動的に回転、伸縮され、透明度が変更されるということです。このコードは Firefox では正常に実行されますが、次の場合に問題が発生します。 Chrome での実行:
1. 変換、回転、伸縮には透明度のみが含まれません
2. 前にアラート コードの行を追加する場合は、[OK] をクリックしてポップアップ ウィンドウを閉じます。 Chrome バージョン 22.0.1229.96
マスター、状況は何ですか? 解決策は何ですか? 理由もなくアラートを追加することはできません...
ディスカッション (解決策) に返信します。 。 。私は大丈夫と言ったのですが、LZ 急いで再インストールしてください
うーん。 。 。 JS がボディの外に書かれているのはなぜですか? それは間違っているのも不思議ではありません
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7355
15
1628
14
1353
52
1265
25
1214
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
