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的不透明度*/
}

至此，此页面特效的所有样式代码都编写完了，真心希望大家能受到启发，同时也希望大家喜欢我的教程。

谢谢大家，咱们下个实战开发案例再会。

时间： 2024-08-01 10:45:24

CSS3实战开发: 纯CSS实现图片过滤分类显示特效的相关文章

CSS3实战开发:使用CSS过滤效果来改变图片样式

</pre><p style="margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px; font-family: Helvetica, Tahoma, Arial, sans-serif; font-size: 14px; line-height: 25.1875px;">   我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见

CSS3实战开发:仿天猫首页图片展示动画特效实战开发

各位网友大家好,我是陌上花会开,人称陌陌.今天我带领大家开发一个仿天猫首页图片展示动画特效的案例.一如往常,我既不提供源码给大家,也不提供Demo给大家,只是希望大家能跟着我的讲解,然后将代码一步步复制到本地,本人可以保证,页面上的代码复制到本地,绝对百分百运行,且得到与陌陌一样的运行效果.我这么做只为激起大伙的动手能力,望大家能明白我的用心. 好了,不废话了,直接本篇的实战开发吧. 我们看一下我们今天要做的实战案例效果图: 1. 鼠标划过前: 2. 鼠标划过右侧的图片时: 可能大伙看这个静态截

CSS3实战开发：手把手教大家搜索表单发光特效实战开发

各位网友,大家好,我是陌上花会开,今天这个案例,我将带领大家,手把手教大家开发一个会发光的表单组,还是先秀运行效果图吧: 从这个效果图,大家可以发现,当光标在某个组件上时,它就会发光,今天我将带领大家实战开发这个特效. PS: 大家可以直接将博客中的代码复制到本地便可得到同样的运行效果. 首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"><met

纯CSS实现图片列表悬停放大特效

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

CSS3实战开发：百度新闻热搜词特效实战开发

各位网友,今天这篇文章,我将手把手带领大家开发百度新闻首页的"新闻热搜词"特效.在这个特效中应用的知识点都很基础,如果你对这些还不清楚,可以关注我以前写的详细教程.今天讲这个案例,也是希望告诉大家,在开发一个特效的时候,请不要将问题复杂化.可能有些人一开始真的不知道从哪下手,当你看完本次教程,你定会觉得,原来一切都这么简单. 可能有些人还不知道这个特效,啥也不说了,直接上效果图: 从上面的特效中,大家不难发现,当鼠标划过热搜词时,会有一个半透明的黑色背景滑上来,而且这个黑色区域中也是有

CSS3实战开发:手把手教你鼠标滑动特效开发

各位网友,如果你已经看过我的CSS3实战开发系列教程,我相信你对CSS3已经有了非常全面深刻的了解.有些人可能CSS3语法掌握了不少,但是真正实际用起来还有点生疏,甚至无从下手.请别担心,我会不断更新一系列实战开发案例,我会为大家分步骤剖析特效开发过程. 今天我将手把手带领大家开发一个鼠标滑动的特效案例,废话不多说,直接上效果动画: 你有没有觉得上面的这个特效很棒呢! 好,现在咱们就开始分步骤实战开发这个动画特效吧: 首先,我们先准备好html页面代码: <!DOCTYPE html> <

CSS3实战开发:使用CSS3实现photoshop的过滤效果

原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我们使用CSS来给web图像添加相同的效果. 首先我们先在网页中显示一张图片,html代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="s

CSS3实战开发: 手把手教大家实战开发鼠标划过图片动画特效

各位网友大家好,我是陌上花会开,当然大家也可以叫我陌陌.今天这篇文章,我将手把手带领大家实战开发一个鼠标划过图片时的动画特效.在这里我不会给大家提供案例的源码下载,但是本人可以保证,只要大家跟着我的思路,一步步将代码复制到本地,一定会得到同样的运行效果.希望大家明白我的用心.好了不废话,直接进入今天的主题吧. 在今天这个案例里,我准备3个素材,一张背景图,两张风景图片.这个大家可以到网上自行下载. 在写代码之前,我先给大家展示一下,动画特效的效果图. 鼠标花过前: 当鼠标划过图片时,图片将逐渐变

CSS3实战开发:手把手教你照片墙实战开发

在<CSS3 2D转换技术之translate实战开发>文章中,我给大家列出了CSS3中的2D转换方法: 1.    translate() 2.    rotate() 3.    scale() 4.    skew() 5.    matrix() 同时对第一个方法 translate()做了非常详尽的介绍,并带领大家实战开发了一个导航条.如果你对translate不了解或不是太熟悉,请阅读我的博文 <CSS3 2D转换技术之translate实战开发> . 在讲解知识点之前