JS の代わりに CSS3 を使用してインタラクティブな効果を実現する方法

今回は、JS の代わりに CSS3 を使用してインタラクティブな効果を実現する方法と、JS の代わりに CSS3 を使用してインタラクティブな効果を実現する場合の注意点について説明します。実際の事例を見てみましょう。

【CSS3とJS】

CSSの実装は、実装方法やパフォーマンスの点で、アニメーションからインターフェースを提供するJSなどのスクリプトに匹敵するものであることは、CSSを知っている学生なら誰でも知っています。 CSS3 と JS アニメーションを比較すると、フロントエンド フレームワークの使用により、ページ アニメーションで CSS3 がますます使用されるようになります

[CSS3 のその他の用途]

アニメーションの置き換えに加えて、さまざまなインタラクションの実装も CSS の能力を反映しており、CSS3 によって提供されるセレクターがより多く使用されています

まず例を見てみましょう: 今回は CSS についての私の深い理解をよりよく反映できます

c9ccee2e6ea535a969eb3f532ad9fe89
body{background:#f4f4f4;margin:0;}
/*list*/
.listcon{}
.listcon .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.listcon .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.listcon .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.listcon .input{-webkit-appearance:none;appearance:none;position:absolute;top:10px;left:12px;padding:0;border:none;margin:0;width:24px;height:24px;border:solid 2px red;border-radius:50%;box-sizing:border-box;outline:none;cursor:pointer;}
.listcon .input:checked::after{content:'';width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.listcon label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.listcon .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.listcon .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.listcon .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.listcon .delete::after{content:'';position:absolute;width:2px;height:20px;background:red;top:12px;left:50%;margin-left:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
.listcon .delete::before{content:'';position:absolute;width:20px;height:2px;background:red;top:50%;left:12px;margin-top:-1px;-webkit-transform:rotate(45deg);transform:rotate(45deg);border-radius:4px;-webkit-transition:all .6s;transition:all .6s;}
531ac245ce3e4fe3d50054a55f265927
28859b2ba70e98e5703d7b62483afef7
    9890cd3db8af2c13be66110fccb4c149
        efa64630fb67b2f5e868af04ec249fd694b3e26ee717c64999d7867364b1b4a3
        4cd7a1c97800370822b14b86c8fd82a0
        2e1cf0710519d5598b1f0f14c36ba674啥地方垃圾费8c1ecd4bb896b2264e0711597d40766c
    94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3

[説明]

上記には多くのインタラクション、ホバーインタラクション、チェックされたインタラクションが含まれています。

上記の実装方法はすでに実装されている人が多いと思います。ここでは主に私が約4年間取り組んできた方法について説明します。この何年かで自分のテクノロジーに対する洞察力やビジョンがどれだけ早く成長したかはわかりますが、多くの知識を活用し、その使い方を知っていることも同じです。 . 意味だけ知っていて本当の意味が分からないってどういうこと？

以前はCSSとJSを組み合わせて上記のインタラクティブ効果を実現していましたが、この時期もCSSを使ってインタラクティブ効果を実現してみましたが、模索しているうちに自分なりのやり方に行き詰ってしまいました。私は今まで元のアイデアを実際には理解していませんでした。

CSS を使用して完全に実装する利点は、再利用性と保守性が向上し、対応するコンポーネントを実装するためのより良い方法が提供され、パフォーマンスも向上することです。

.listcon .input:checked+label

CSS3 によって追加されたさまざまな強力なセレクターを使用して、より多くのより優れたインタラクティブな効果を実現できます。今後は、JS を使用して DOM を変更するという悲劇から離れ、CSS にもっと傾倒していきます

これを読んだ後は、この方法を習得したと思います。この記事の事例など php 中国語 Web サイトの他の関連記事にもご注目ください。

推奨読書:

CSS でテキストの省略をカスタマイズする方法

CSS の絶対位置をすべての解像度と互換性のあるものにする方法

以上がJS の代わりに CSS3 を使用してインタラクティブな効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。