CSS3实战开发: 纯CSS实现图片过滤分类显示特效
各位網(wǎng)友大家好，今天我要帶領(lǐng)大家開(kāi)發(fā)一個(gè)純CSS的圖片分類(lèi)顯示的網(wǎng)址導(dǎo)航，單純看標(biāo)題大家可能有些困惑，依照以往慣例，我先給大家演示一下實(shí)際運(yùn)行效果：
從上面的運(yùn)行效果，大家不難發(fā)現(xiàn)，當(dāng)我點(diǎn)擊某一菜單時(shí)，導(dǎo)航區(qū)域會(huì)相應(yīng)高亮顯示此分類(lèi)的圖標(biāo)，而其他圖標(biāo)則會(huì)變暗。
很多人可能會(huì)說(shuō)，這個(gè)這么簡(jiǎn)單，直接使用javascript或jQuery等前端框架，再配合一些CSS，就可以很快實(shí)現(xiàn)同樣的效果了。如果你是這一部分人，我也希望你停下腳步，看看這篇教程。因?yàn)樵诮裉爝@篇教程中，我會(huì)用另一個(gè)思維方式來(lái)思考問(wèn)題，我會(huì)帶領(lǐng)大家，完全脫離js，怎么來(lái)實(shí)現(xiàn)切換效果以及實(shí)現(xiàn)圖片分類(lèi)，旨在傳授給大家一個(gè)思想。
好了，廢話不多說(shuō)了，直接開(kāi)始今天的實(shí)戰(zhàn)開(kāi)發(fā)教程吧。
首先，我們先定義html頁(yè)面，代碼如下(為了方便演示，我直接導(dǎo)入了styles.css文件，此時(shí)文件沒(méi)任何樣式內(nèi)容)：
<!DOCTYPE html> <html><head><meta charset="utf-8"><link rel="stylesheet" href="styles.css"><title>CSS3實(shí)戰(zhàn)開(kāi)發(fā):圖片過(guò)濾分類(lèi)特效</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">全部類(lèi)別</label><input id="selector-type-1" type="radio" name="title_set" class="selector-type-1" /><label for="selector-type-1" class="label-type-1">電子商務(wù)</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">信息門(mén)戶</label><input id="selector-type-7" type="radio" name="title_set" class="selector-type-7" /><label for="selector-type-7" class="label-type-7">票務(wù)</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代碼中會(huì)發(fā)現(xiàn),我的導(dǎo)航菜單使用了label或radio標(biāo)簽，我為什么要定義它們呢，因?yàn)槲蚁胫牢耶?dāng)前點(diǎn)擊了哪一個(gè)菜單，因?yàn)閱螒{CSS，我們貌似沒(méi)法得到當(dāng)前點(diǎn)擊誰(shuí)，所以當(dāng)我點(diǎn)擊Label時(shí)，會(huì)自動(dòng)的選中某一radio了。
此時(shí)我們運(yùn)行一下頁(yè)面，看看在未添加任何樣式時(shí)頁(yè)面的運(yùn)行效果：
首先，我們先調(diào)整導(dǎo)航區(qū)域的大小，以及給導(dǎo)航區(qū)域添加邊框，樣式代碼如下：
*{ /*設(shè)置頁(yè)面基本屬性*/margin:0;padding:0;font-size:14px; }.container{ /*調(diào)整外圍容器布局*/margin:200px auto;width:1024px; }.hot_navs{ /*設(shè)置分類(lèi)導(dǎo)航樣式*/border:1px solid #CCCCCC;padding:.5em;width:725px; }此時(shí)頁(yè)面效果如下：
區(qū)域范圍大小已經(jīng)定下來(lái)了，現(xiàn)在我們要給導(dǎo)航菜單設(shè)置樣式，隱藏單選按鈕，同時(shí)設(shè)置菜單與圖表之間的分割線：
/*分割線*/ .hot_navs .splitline { margin-bottom:4px;height:1px;border-top:1px dotted #999999; }.hot_navs a{ /*設(shè)置導(dǎo)航item的基本樣式*/text-decoration:none;display:inline-block;height:70px;line-height:70px;position:relative;background:#FFE500;-webkit-transition:all 0.6s; /*當(dāng)item屬性發(fā)生變化時(shí)，執(zhí)行過(guò)度動(dòng)畫(huà)*/-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 { /*設(shè)置區(qū)域頭部導(dǎo)航菜單的基本樣式*/display:inline-block;margin-top:10px;padding:10px 10px;cursor:pointer; }此時(shí)效果如下：
細(xì)心的網(wǎng)友會(huì)發(fā)現(xiàn)，我在上面的CSS樣式中添加了transition屬性，此屬性主要是說(shuō)，當(dāng)菜單的任何一個(gè)屬性發(fā)生變化時(shí)，執(zhí)行過(guò)渡動(dòng)畫(huà)。
接著，我們給導(dǎo)航按鈕添加選中時(shí)的樣式，同時(shí)設(shè)置，當(dāng)選擇某一菜單時(shí)，設(shè)置此分類(lèi)的圖標(biāo)不透明度為1，其它分類(lèi)的不透明度為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 { /*設(shè)置選擇某一菜單時(shí)，當(dāng)前菜單的基本樣式*/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;/*當(dāng)選擇某一類(lèi)別菜單時(shí)，設(shè)置當(dāng)前類(lèi)別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;/*當(dāng)選擇某一類(lèi)別菜單時(shí)，設(shè)置其余類(lèi)別item的不透明度*/ }至此，此頁(yè)面特效的所有樣式代碼都編寫(xiě)完了，真心希望大家能受到啟發(fā)，同時(shí)也希望大家喜歡我的教程。
謝謝大家，咱們下個(gè)實(shí)戰(zhàn)開(kāi)發(fā)案例再會(huì)。
?
posted on 2014-09-06 11:24 NET未來(lái)之路 閱讀(...) 評(píng)論(...) 編輯 收藏轉(zhuǎn)載于:https://www.cnblogs.com/lonelyxmas/p/3959249.html
總結(jié)
以上是生活随笔為你收集整理的CSS3实战开发: 纯CSS实现图片过滤分类显示特效的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： DataGirdView 常用操作
- 下一篇： CSS3之阴影