CSS3 は JS を置き換えて対話を実現します-CSSチュートリアル-php.cn

CSS3 は JS を置き換えて対話を実現します

小云云

リリース： 2017-12-19 09:27:13

オリジナル

1825 人が閲覧しました

この記事では主に、CSS3 アニメーションと JS アニメーションを比較する観点から、JS を置き換える CSS3 の使用について紹介します。フロントエンドフレームワークの使用により、ページアニメーションで CSS3 が使用されることが多くなります。具体的なサンプルコードについてはこちらの記事を参考にしていただければ幸いです。

【CSS3とJS】

CSSの実装は、実装方法やパフォーマンスの点で、アニメーションからインターフェースを提供するJSなどのスクリプトに匹敵するものであることは、CSSを知っている学生なら誰でも知っています。 CSS3 の 2 つを 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 にもっと傾倒していきます