CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:58 AM

css3実戦開発する見せるフィルター

ネチズンの皆さん、今日は純粋な CSS 画像分類表示 URL ナビゲーションの開発について説明します。タイトルを見るだけでは少し混乱するかもしれませんが、最初に実際の操作効果を示します。

上記の操作効果から、特定のメニューをクリックすると、ナビゲーション領域でこのカテゴリのアイコンが強調表示され、他のアイコンが淡色表示になることがわかります。

これはとても簡単だと思う人も多いかもしれませんが、JavaScript や jQuery などのフロントエンドフレームワークといくつかの CSS を直接使用することで、同じ効果をすぐに実現できます。あなたもそのような人であれば、立ち止まってこのチュートリアルを読んでいただければ幸いです。今日のチュートリアルでは、別の考え方を使用して問題を考え、js から完全に脱却し、スイッチング効果と画像分類を実現する方法を紹介します。そのアイデアを教えることを目的としています。

さて、早速、今日の実践的な開発チュートリアルを始めましょう。

まず、HTML ページを定義します。コードは次のとおりです (デモの便宜上、styles.css ファイルを直接インポートしました。この時点では、ファイルにはスタイルコンテンツがありません)。上記の HTML コードを見ると、ナビゲーションメニューにラベルまたはラジオタグが使用されていることがわかります。なぜそれらを定義する必要があるのでしょうか。CSS だけでは、どのメニューをクリックしているのかを知ることができないからです。現在クリックしているため、 Label をクリックすると、特定のラジオが自動的に選択されます。

この時点で、スタイルが追加されていない場合にページがどのように機能するかを確認してみましょう:

<!DOCTYPE html><html>    <head>        <meta charset="utf-8">        <link rel="stylesheet" href="styles.css">        <title>CSS3实战开发:图片过滤分类特效</title>    </head>    <body>        <div class="container">        <div class="hot_navs">            <div class="hot_title">                <input id="selector-type-all" type="radio" name="title_set" class="selector-type-all" checked="checked" />                <label for="selector-type-all" class="label-type-all">全部类别</label>                                <input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" />                <label for="selector-type-1" class="label-type-1">电子商务</label>                                <input id="selector-type-2" type="radio" name="title_set" class="selector-type-2" />                <label for="selector-type-2" class="label-type-2">旅游</label>                                <input id="selector-type-3" type="radio" name="title_set" class="selector-type-3" />                <label for="selector-type-3" class="label-type-3">社交</label>                                <input id="selector-type-4" type="radio" name="title_set" class="selector-type-4" />                <label for="selector-type-4" class="label-type-4">视频</label>                                <input id="selector-type-5" type="radio" name="title_set" class="selector-type-5" />                <label for="selector-type-5" class="label-type-5">新闻</label>                                <input id="selector-type-6" type="radio" name="title_set" class="selector-type-6" />                <label for="selector-type-6" class="label-type-6">信息门户</label>                                <input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" />                <label for="selector-type-7" class="label-type-7">票务</label>                <div class="splitline"></div>                <a class="item-type-1" href="http://www.itdriver.cn">                    <img  src="/static/imghwm/default1.png"  data-src="imgs/101.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-1" href="http://www.itdriver.cn">                    <img  src="/static/imghwm/default1.png"  data-src="imgs/102.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-7" href="http://www.itdriver.cn">                        <i></i>                    <img  src="/static/imghwm/default1.png"  data-src="imgs/103.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                        <img  src="/static/imghwm/default1.png"  data-src="imgs/104.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-5" href="http://www.itdriver.cn">                        <img  src="/static/imghwm/default1.png"  data-src="imgs/105.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-4" href="http://www.itdriver.cn">                    <img  src="/static/imghwm/default1.png"  data-src="imgs/106.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-3" href="http://www.itdriver.cn">                        <i></i>                    <img  src="/static/imghwm/default1.png"  data-src="imgs/107.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-4" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/108.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-3" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/109.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-3" href="http://www.itdriver.cn">                        <i></i>                    <img  src="/static/imghwm/default1.png"  data-src="imgs/110.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                        <i></i>                    <img  src="/static/imghwm/default1.png"  data-src="imgs/111.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/112.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/113.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/114.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-1" href="http://www.itdriver.cn">                        <i></i>                    <img  src="/static/imghwm/default1.png"  data-src="imgs/115.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-5" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/116.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-6" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/117.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>                <a class="item-type-2" href="http://www.itdriver.cn">                    <i></i>                        <img  src="/static/imghwm/default1.png"  data-src="imgs/118.png"  class="lazy"  / alt="CSS3 実践開発: 画像のフィルタリング、分類、表示効果を実装する純粋な CSS_html/css_WEB-ITnose" >                </a>            </div>        </div>    </div>        </body></html>

まず、ナビゲーション領域のサイズを調整し、ナビゲーション領域に境界線を追加します。コードは次のとおりです:

この時点でのページ効果は次のとおりです:

領域のサイズが決定されました。次に、ナビゲーションメニューのスタイルを設定し、ラジオボタンを非表示にする必要があります。そして、メニューとチャートの間に境界線を設定します:

*{ /*设置页面基本属性*/    margin:0;    padding:0;    font-size:14px;}.container{ /*调整外围容器布局*/    margin:200px auto;    width:1024px;}.hot_navs{ /*设置分类导航样式*/    border:1px solid #CCCCCC;    padding:.5em;    width:725px;}

このときの効果は次のとおりです:

注意してくださいネチズンは、私が上記の CSS スタイルにtransition属性を追加したことに気づくでしょう。この属性は主に次のことを意味します。メニューの属性が変更されると、遷移アニメーションが実行されます。

次に、選択したスタイルをナビゲーションボタンに追加し、同時に特定のメニューが選択されたときに、このカテゴリのアイコンの不透明度を1に設定し、他のカテゴリの不透明度を0.2に設定します。

/*分割线*/.hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*设置导航item的基本样式*/    text-decoration:none;    display:inline-block;    height:70px;    line-height:70px;    position:relative;    background:#FFE500;        -webkit-transition:all 0.6s; /*当item属性发生变化时，执行过度动画*/    -moz-transition:all 0.6s;    -o-transition:all 0.6s;    transition:all 0.6s;}.hot_navs input{display:none;}.hot_navs .label-type-all,.hot_navs .label-type-1,.hot_navs .label-type-2,.hot_navs .label-type-3,.hot_navs .label-type-4,.hot_navs .label-type-5,.hot_navs .label-type-6,.hot_navs .label-type-7 { /*设置区域头部导航菜单的基本样式*/    display:inline-block;    margin-top:10px;    padding:10px 10px;    cursor:pointer;}

この時点で、このページの特殊効果のスタイルコードはすべて書かれています。皆さんがインスピレーションを得られることを心から願っています。また、皆さんが私のチュートリアルを気に入ってくれることを願っています。

皆さん、ありがとうございました。次の実用的な開発ケースでお会いしましょう。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML：Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

EditPlus 中国語クラック版

サイズが小さく、構文の強調表示、コードプロンプト機能はサポートされていません

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、