當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3实战开发: 纯CSS实现图片过滤分类显示特效

發布時間：2023/12/9 CSS 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3实战开发: 纯CSS实现图片过滤分类显示特效小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

CSS3實戰開發: 純CSS實現圖片過濾分類顯示特效原文:CSS3實戰開發: 純CSS實現圖片過濾分類顯示特效

各位網友大家好，今天我要帶領大家開發一個純CSS的圖片分類顯示的網址導航，單純看標題大家可能有些困惑，依照以往慣例，我先給大家演示一下實際運行效果：

從上面的運行效果，大家不難發現，當我點擊某一菜單時，導航區域會相應高亮顯示此分類的圖標，而其他圖標則會變暗。

很多人可能會說，這個這么簡單，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快實現同樣的效果了。如果你是這一部分人，我也希望你停下腳步，看看這篇教程。因為在今天這篇教程中，我會用另一個思維方式來思考問題，我會帶領大家，完全脫離js，怎么來實現切換效果以及實現圖片分類，旨在傳授給大家一個思想。

好了，廢話不多說了，直接開始今天的實戰開發教程吧。

首先，我們先定義html頁面，代碼如下(為了方便演示，我直接導入了styles.css文件，此時文件沒任何樣式內容)：

<!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="imgs/101.png" /> </a><a class="item-type-1" href="http://www.itdriver.cn"><img src="imgs/102.png" /> </a><a class="item-type-7" href="http://www.itdriver.cn"> <i></i><img src="imgs/103.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"> <img src="imgs/104.png" /> </a><a class="item-type-5" href="http://www.itdriver.cn"> <img src="imgs/105.png" /> </a><a class="item-type-4" href="http://www.itdriver.cn"><img src="imgs/106.png" /> </a><a class="item-type-3" href="http://www.itdriver.cn"> <i></i><img src="imgs/107.png" /> </a><a class="item-type-4" href="http://www.itdriver.cn"><i></i> <img src="imgs/108.png" /> </a><a class="item-type-3" href="http://www.itdriver.cn"><i></i> <img src="imgs/109.png" /> </a><a class="item-type-3" href="http://www.itdriver.cn"> <i></i><img src="imgs/110.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"> <i></i><img src="imgs/111.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"><i></i> <img src="imgs/112.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"><i></i> <img src="imgs/113.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"><i></i> <img src="imgs/114.png" /> </a><a class="item-type-1" href="http://www.itdriver.cn"> <i></i><img src="imgs/115.png" /> </a><a class="item-type-5" href="http://www.itdriver.cn"><i></i> <img src="imgs/116.png" /> </a><a class="item-type-6" href="http://www.itdriver.cn"><i></i> <img src="imgs/117.png" /> </a><a class="item-type-2" href="http://www.itdriver.cn"><i></i> <img src="imgs/118.png" /> </a> </div></div></div></body> </html>

大家從上面的html代碼中會發現,我的導航菜單使用了label或radio標簽，我為什么要定義它們呢，因為我想知道我當前點擊了哪一個菜單，因為單憑CSS，我們貌似沒法得到當前點擊誰，所以當我點擊Label時，會自動的選中某一radio了。

此時我們運行一下頁面，看看在未添加任何樣式時頁面的運行效果：

首先，我們先調整導航區域的大小，以及給導航區域添加邊框，樣式代碼如下：

*{ /*設置頁面基本屬性*/margin:0;padding:0;font-size:14px; }.container{ /*調整外圍容器布局*/margin:200px auto;width:1024px; }.hot_navs{ /*設置分類導航樣式*/border:1px solid #CCCCCC;padding:.5em;width:725px; }

此時頁面效果如下：

區域范圍大小已經定下來了，現在我們要給導航菜單設置樣式，隱藏單選按鈕，同時設置菜單與圖表之間的分割線：

/*分割線*/ .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; }

此時效果如下：

細心的網友會發現，我在上面的CSS樣式中添加了transition屬性，此屬性主要是說，當菜單的任何一個屬性發生變化時，執行過渡動畫。

接著，我們給導航按鈕添加選中時的樣式，同時設置，當選擇某一菜單時，設置此分類的圖標不透明度為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的不透明度*/ }

至此，此頁面特效的所有樣式代碼都編寫完了，真心希望大家能受到啟發，同時也希望大家喜歡我的教程。

謝謝大家，咱們下個實戰開發案例再會。

posted on 2014-09-06 11:24 NET未來之路閱讀(...) 評論(...) 編輯收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/3959249.html

總結

以上是生活随笔為你收集整理的CSS3实战开发: 纯CSS实现图片过滤分类显示特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： DataGirdView 常用操作
下一篇： CSS3之阴影