検索
ホームページウェブフロントエンドCSSチュートリアル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:&#39;&#39;;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:&#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;}
.listcon .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>
    </p><p>
        </p><p></p>
        <input>
        <label>啥地方垃圾费</label>
    

[説明]

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

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

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

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

.listcon .input:checked+label

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

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

推奨読書:

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

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


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

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
Google Fontsをタグ付けし、Goofonts.comを作成する方法Google Fontsをタグ付けし、Goofonts.comを作成する方法Apr 12, 2025 pm 12:02 PM

Goofontsは、開発者妻とデザイナーの夫によって署名されたサイドプロジェクトであり、どちらもタイポグラフィの大ファンです。 Googleにタグを付けています

時代を超越したWeb開発記事時代を超越したWeb開発記事Apr 12, 2025 am 11:44 AM

Pavithra Kodmadは、彼らが変化したWeb開発に関する最も時代を超越した記事のいくつかであると考えていることについて、人々に推奨事項を求めました

セクション要素との取引セクション要素との取引Apr 12, 2025 am 11:39 AM

2つの記事がまったく同じ日に公開されました。

graphQlの練習JavaScript APIでクエリをクエリしますgraphQlの練習JavaScript APIでクエリをクエリしますApr 12, 2025 am 11:33 AM

GraphQL APIの構築方法を学ぶことは非常に挑戦的です。ただし、10分でGraphQL APIを使用する方法を学ぶことができます!そして、それは私が完璧になったことがあります

コンポーネントレベルのCMSコンポーネントレベルのCMSApr 12, 2025 am 11:09 AM

コンポーネントがデータが近くに住んでいる環境に住んでいる場合、視覚コンポーネントと

円にタイプを設定します...オフセットパス付き円にタイプを設定します...オフセットパス付きApr 12, 2025 am 11:00 AM

ここでは、Yuanchuanからの合法的なCSSの策略があります。このCSSプロパティオフセットパスがあります。むかしむかし、それはモーションパスと呼ばれ、その後改名されました。私

CSSで「戻る」ことは何をしますか?CSSで「戻る」ことは何をしますか?Apr 12, 2025 am 10:59 AM

Miriam Suzanneは、このテーマに関するMozilla開発者のビデオで説明しています。

現代の恋人現代の恋人Apr 12, 2025 am 10:58 AM

私はこのようなものが大好きです。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター