CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose
Jun 24, 2016 am 11:58 AM
各位網(wǎng)友大家好，今天我要帶領大家開發(fā)一個純CSS的圖片分類顯示的網(wǎng)址導航，單純看標題大家可能有些困惑，依照以往慣例，我先給大家演示一下實際運行效果：
從上面的運行效果，大家不難發(fā)現(xiàn)，當我點擊某一菜單時，導航區(qū)域會相應高亮顯示此分類的圖標，而其他圖標則會變暗。
很多人可能會說，這個這么簡單，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快實現(xiàn)同樣的效果了。如果你是這一部分人，我也希望你停下腳步，看看這篇教程。因為在今天這篇教程中，我會用另一個思維方式來思考問題，我會帶領大家，完全脫離js，怎么來實現(xiàn)切換效果以及實現(xiàn)圖片分類，旨在傳授給大家一個思想。
好了，廢話不多說了，直接開始今天的實戰(zhàn)開發(fā)教程吧。
首先，我們先定義html頁面，代碼如下(為了方便演示，我直接導入了styles.css文件，此時文件沒任何樣式內(nèi)容)：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <link rel="stylesheet" href="styles.css"> <title>CSS3實戰(zhàn)開發(fā):圖片過濾分類特效</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/imghw/default1.png" data-src="imgs/101.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/102.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/103.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/104.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/105.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/106.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/107.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/108.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/109.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/110.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/111.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/112.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/113.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/114.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/115.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/116.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/117.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/118.png" class="lazy" / alt="CSS3實戰(zhàn)開發(fā): 純CSS實現(xiàn)圖片過濾分類顯示特效_html/css_WEB-ITnose" > </a> </div> </div> </div> </body></html>
大家從上面的html代碼中會發(fā)現(xiàn),我的導航菜單使用了label或radio標簽，我為什么要定義它們呢，因為我想知道我當前點擊了哪一個菜單，因為單憑CSS，我們貌似沒法得到當前點擊誰，所以當我點擊Label時，會自動的選中某一radio了。
此時我們運行一下頁面，看看在未添加任何樣式時頁面的運行效果：
首先，我們先調(diào)整導航區(qū)域的大小，以及給導航區(qū)域添加邊框，樣式代碼如下：
*{ /*設置頁面基本屬性*/ margin:0; padding:0; font-size:14px;}.container{ /*調(diào)整外圍容器布局*/ margin:200px auto; width:1024px;}.hot_navs{ /*設置分類導航樣式*/ border:1px solid #CCCCCC; padding:.5em; width:725px;} 此時頁面效果如下：
區(qū)域范圍大小已經(jīng)定下來了，現(xiàn)在我們要給導航菜單設置樣式，隱藏單選按鈕，同時設置菜單與圖表之間的分割線：
/*分割線*/.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屬性發(fā)生變化時，執(zhí)行過度動畫*/ -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 { /*設置區(qū)域頭部導航菜單的基本樣式*/ display:inline-block; margin-top:10px; padding:10px 10px; cursor:pointer;} 此時效果如下：
細心的網(wǎng)友會發(fā)現(xiàn)，我在上面的CSS樣式中添加了transition屬性，此屬性主要是說，當菜單的任何一個屬性發(fā)生變化時，執(zhí)行過渡動畫。
接著，我們給導航按鈕添加選中時的樣式，同時設置，當選擇某一菜單時，設置此分類的圖標不透明度為1，其它分類的不透明度為0.2，樣式代碼如下：
.hot_navs input.selector-type-all:checked ~ .label-type-all,.hot_navs input.selector-type-1:checked ~ .label-type-1,.hot_navs input.selector-type-2:checked ~ .label-type-2,.hot_navs input.selector-type-3:checked ~ .label-type-3,.hot_navs input.selector-type-4:checked ~ .label-type-4,.hot_navs input.selector-type-5:checked ~ .label-type-5,.hot_navs input.selector-type-6:checked ~ .label-type-6,.hot_navs input.selector-type-7:checked ~ .label-type-7 { /*設置選擇某一菜單時，當前菜單的基本樣式*/ font-weight:bold; border-bottom:2px solid #FF9900;}.hot_navs input.selector-type-all:checked ~ a,.hot_navs input.selector-type-1:checked ~ a.item-type-1,.hot_navs input.selector-type-2:checked ~ a.item-type-2,.hot_navs input.selector-type-3:checked ~ a.item-type-3,.hot_navs input.selector-type-4:checked ~ a.item-type-4,.hot_navs input.selector-type-5:checked ~ a.item-type-5,.hot_navs input.selector-type-6:checked ~ a.item-type-6,.hot_navs input.selector-type-7:checked ~ a.item-type-7 { opacity: 1;/*當選擇某一類別菜單時，設置當前類別item的不透明度*/}.hot_navs input.selector-type-1:checked ~ a:not(.item-type-1),.hot_navs input.selector-type-2:checked ~ a:not(.item-type-2),.hot_navs input.selector-type-3:checked ~ a:not(.item-type-3),.hot_navs input.selector-type-4:checked ~ a:not(.item-type-4),.hot_navs input.selector-type-5:checked ~ a:not(.item-type-5),.hot_navs input.selector-type-6:checked ~ a:not(.item-type-6),.hot_navs input.selector-type-7:checked ~ a:not(.item-type-7) { opacity: 0.2;/*當選擇某一類別菜單時，設置其余類別item的不透明度*/} 至此，此頁面特效的所有樣式代碼都編寫完了，真心希望大家能受到啟發(fā)，同時也希望大家喜歡我的教程。
謝謝大家，咱們下個實戰(zhàn)開發(fā)案例再會。
?
熱AI工具
Undress AI Tool
免費脫衣服圖片
Undresser.AI Undress
人工智能驅動的應用程序，用于創(chuàng)建逼真的裸體照片
AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。
Clothoff.io
AI脫衣機
Video Face Swap
使用我們完全免費的人工智能換臉工具輕松在任何視頻中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的代碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
功能強大的PHP集成開發(fā)環(huán)境
Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具
SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)
四款值得推薦的AI輔助編程工具
Apr 22, 2024 pm 05:34 PM
這個AI輔助編程工具在這個AI迅速發(fā)展的階段，挖掘出了一大批好用的AI輔助編程工具。AI輔助編程工具能夠提高開發(fā)效率、改善代碼質(zhì)量、降低bug率，是現(xiàn)代軟件開發(fā)過程中的重要助手。今天大姚給大家分享4款AI輔助編程工具（并且都支持C#語言），希望對大家有所幫助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI編碼助手，可幫助你更快、更省力地編寫代碼，從而將更多精力集中在問題解決和協(xié)作上。Git
AI程序員哪家強？探索Devin、通義靈碼和SWE-agent的潛力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距世界首個AI程序員Devin誕生不足一個月，普林斯頓大學的NLP團隊開發(fā)了一個開源AI程序員SWE-agent。它利用GPT-4模型在GitHub存儲庫中自動解決問題。SWE-agent在SWE-bench測試集上的表現(xiàn)與Devin相似，平均耗時93秒，解決了12.29%的問題。SWE-agent通過與專用終端交互，可以打開、搜索文件內(nèi)容，使用自動語法檢查、編輯特定行，以及編寫和執(zhí)行測試。（注：以上內(nèi)容為原內(nèi)容微調(diào)，但保留了原文中的關鍵信息，未超過指定字數(shù)限制。）SWE-A
學習如何利用Go語言開發(fā)移動應用程序
Mar 28, 2024 pm 10:00 PM
Go語言開發(fā)移動應用程序教程隨著移動應用市場的不斷蓬勃發(fā)展，越來越多的開發(fā)者開始探索如何利用Go語言開發(fā)移動應用程序。作為一種簡潔高效的編程語言，Go語言在移動應用開發(fā)中也展現(xiàn)出了強大的潛力。本文將詳細介紹如何利用Go語言開發(fā)移動應用程序，并附上具體的代碼示例，幫助讀者快速入門并開始開發(fā)自己的移動應用。一、準備工作在開始之前，我們需要準備好開發(fā)環(huán)境和工具。首
Go語言前端技術探秘：前端開發(fā)新視野
Mar 28, 2024 pm 01:06 PM
Go語言作為一種快速、高效的編程語言，在后端開發(fā)領域廣受歡迎。然而，很少有人將Go語言與前端開發(fā)聯(lián)系起來。事實上，使用Go語言進行前端開發(fā)不僅可以提高效率，還能為開發(fā)者帶來全新的視野。本文將探討使用Go語言進行前端開發(fā)的可能性，并提供具體的代碼示例，幫助讀者更好地了解這一領域。在傳統(tǒng)的前端開發(fā)中，通常會使用JavaScript、HTML和CSS來構建用戶界面
PHP實戰(zhàn)：快速實現(xiàn)斐波那契數(shù)列的代碼示例
Mar 20, 2024 pm 02:24 PM
PHP實戰(zhàn)：快速實現(xiàn)斐波那契數(shù)列的代碼示例斐波那契數(shù)列是數(shù)學中一個非常有趣且常見的數(shù)列，其定義如下：第一個和第二個數(shù)為0和1，從第三個數(shù)開始，每個數(shù)都是前兩個數(shù)的和。斐波那契數(shù)列的前幾個數(shù)字依次為0,1,1.2,3,5,8,13,21,...依此類推。在PHP中，我們可以通過遞歸和迭代兩種方式來實現(xiàn)斐波那契數(shù)列的生成。下面我們分別來展示這兩
夸克如何打開過濾重復文件
Mar 01, 2024 am 11:25 AM
使用夸克瀏覽器時，其中有一個過濾重復文件的功能，有些朋友對此還不是很了解，下面為大家介紹一下打開這個功能的操作方法，感興趣的朋友和我一起來看看吧。1.首先在手機中點擊“夸克瀏覽器”進入界面后，在頁面中間的選項里點擊選擇“夸克網(wǎng)盤”打開進入。2.在夸克網(wǎng)盤界面里下方部分找到“備份設置”，并在上面點擊打開，如下圖所示位置：3.接下來在進入的頁面里有一個“過濾重復文件”，在它的后面顯示有一個開關按鈕，在上面點擊圓形的滑塊把它設置為彩色即為開啟該功能，繼續(xù)備份文件時將會跳過重復的文件來節(jié)省網(wǎng)盤容量。
Android開發(fā)最適合的Linux發(fā)行版是哪個？
Mar 14, 2024 pm 12:30 PM
Android開發(fā)是一項繁忙而又令人興奮的工作，而選擇一個適合的Linux發(fā)行版來進行開發(fā)則顯得尤為重要。在眾多的Linux發(fā)行版中，究竟哪一個最適合Android開發(fā)呢？本文將從幾個方面來探討這一問題，并給出具體的代碼示例。首先，我們來看一下目前流行的幾個Linux發(fā)行版：Ubuntu、Fedora、Debian、CentOS等，它們都有各自的優(yōu)點和特點。
VSCode最適合哪種框架開發(fā)？
Mar 25, 2024 pm 02:03 PM
VSCode是一款功能強大、靈活性高、易于擴展的開源代碼編輯器，廣受開發(fā)者青睞。它支持眾多編程語言和框架，能夠滿足不同項目需求。但是，針對不同的框架，VSCode的優(yōu)勢可能有所不同。本文將討論VSCode在不同框架開發(fā)中的適用性，并提供具體的代碼示例。1.ReactReact是一款流行的JavaScript庫，用于構建用戶界面。在使用React開發(fā)項目時，
