JS の代わりに CSS3 を使用して対話型チュートリアルを実現する方法

この記事では、インタラクションを実現するために JS の代わりに CSS3 を使用することを主に紹介します。CSS3 アニメーションと JS アニメーションを比較するという観点から見ると、フロントエンド フレームワークの使用により、ページ アニメーションがますます使用されるようになります。 CSS3。具体的なコード例については、この記事を参照してください

[CSS3 と JS]

CSS を知っている学生は、実装でもパフォーマンスでも、CSS の実装が最も低いレベルであることを知っています。 CSS3 アニメーションと JS アニメーションを比較するという観点からは、より明確になり、フロントエンド フレームワークの使用により、ますます多くのページ アニメーションで CSS3 が使用されるようになります

[CSS3 のその他の用途]

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

まず例を見てみましょう。今回は私の考えをよりよく反映できます。 CSSの

<style>
body{background:#f4f4f4;margin:0;}
/*list*/
.list__con{}
.list__con .box{background:#fff;position:relative;border-bottom:solid 1px #858585;overflow:hidden;}
.list__con .box:hover{background:#f4f4f4;-webkit-transition:all .6s;transition:all .6s;}
.list__con .box:hover .delete{-webkit-transition:all .6s;transition:all .6s;opacity:1;}
.list__con .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;}
.list__con .input:checked::after{content:&#39;&#39;;width:14px;height:14px;background:red;position:absolute;top:3px;left:3px;border-radius:50%;}
.list__con label{line-height:24px;padding:10px 0 10px 48px;display:block;-webkit-transition:all .4s;transition:all .4s;}
.list__con .input:checked+label{color:#d9d9d9;text-decoration:line-through;}
.list__con .delete{width:44px;height:44px;float:right;position:relative;cursor:pointer;opacity:0;}
.list__con .delete:hover::after{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete:hover::before{-webkit-transform:rotate(225deg);transform:rotate(225deg);}
.list__con .delete::after{content:&#39;&#39;;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;}
.list__con .delete::before{content:&#39;&#39;;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="list__con">
    <p class="box">
        <p class="delete"></p>
        <input class="input" type="checkbox" />
        <label>啥地方垃圾费</label>
    </p>
</p>

[説明]

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

上記の実装方法はすでに実装されていると思います。多くの人がここでそれを達成しています。今回は主に、私の理解とテクノロジーに対するビジョンについて話します。私はこれまで 4 年間近く仕事をしてきましたが、自分がどれだけ早く成長したかを知っています。知識はあり、その使い方は知っていますが、今回は、意味だけを知っていて本当の意味を知らないということが何を意味するのか、そしてその理由がよくわかりました。

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

CSS を使用して完全に実装する利点は、再利用性と保守性が向上し、対応するコンポーネントを実装するためのより良い方法が提供され、パフォーマンスも向上します。上記のように、CSS3 によって追加されたさまざまな強力なセレクターを使用して、より多くのより優れたインタラクティブな効果を実現できます。今後は、JS を使用して DOM を変更するという悲劇から離れ、CSS にもっと傾倒していきます。

以上がJS の代わりに CSS3 を使用して対話型チュートリアルを実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。