CSS キーフレームを動的に変更する JS メソッド: 1. 「document.styleSheets」インターフェイスを通じて、Web ページに導入されているリンク スタイル シートとスタイル スタイル シートを取得します; 2. 「insertRule(rule,index)」を通じて挿入します。 )" メソッド 新しい "@keyframes" ルールで十分です。
このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター
CSS キーフレームを動的に変更する方法jsで?
#js は CSS3 の @keyframes ルールを動的に変更します
秒針の初期方向は 6 時方向です。秒針が回転するように @keyframes ルールを設定します。 1 回
@keyframes rotate { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } }
transform: rotate(180deg);
ここで js を使用する必要があります
var style = document.styleSheets[0];
# # 次に、insertRule(rule,index) メソッドを使用して新しい @keyframes ルールを挿入します
var newdeg = 540; style.insertRule("@keyframes secondrotate {to{transform: rotate(" + newdeg + "deg);}}",4);
# 推奨される学習: 「
css ビデオ チュートリアル以上がJSでCSSキーフレームを動的に変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。