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

時間  2019-12-08
標籤 css3 css 實戰 開發 實現 圖片 過濾 分類 顯示 特效 欄目 CSS 简体版
原文   原文鏈接

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

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

不少人可能會說，這個這麼簡單，直接使用javascript或jQuery等前端框架，再配合一些CSS，就能夠很快實現一樣的效果了。若是你是這一部分人，我也但願你停下腳步，看看這篇教程。由於在今天這篇教程中，我會用另外一個思惟方式來思考問題，我會帶領你們，徹底脫離js，怎麼來實現切換效果以及實現圖片分類，旨在傳授給你們一個思想。html

好了，廢話很少說了，直接開始今天的實戰開發教程吧。前端

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

<!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了。web

此時咱們運行一下頁面，看看在未添加任何樣式時頁面的運行效果：前端框架

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

*{ /*設置頁面基本屬性*/
    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的不透明度*/
}

至此，此頁面特效的全部樣式代碼都編寫完了，真心但願你們能受到啓發，同時也但願你們喜歡個人教程。

謝謝你們，我們下個實戰開發案例再會。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程