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

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

【CSS3とJS】

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

[CSS3 のその他の用途]

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

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

<style>
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;}
</style>
<p class="listcon">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[説明]

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

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

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

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

.listcon .input:checked+label

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

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

推奨読書:

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

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

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