`
陌上花会开
  • 浏览: 39580 次
  • 性别: Icon_minigender_1
  • 来自: 苏州
社区版块
存档分类
最新评论

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

css3css图片过滤特效 
阅读更多

各位网友大家好，今天我要带领大家开发一个纯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的不透明度*/
}

 

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

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

 

2
顶
4
踩
分享到：
| CSS3实战开发:使用CSS过滤效果来改变图片 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    招聘网站特效制作 accp北大青鸟S2项目实战 参考代码

    这个S2阶段的项目实战，主要关注网站特效的制作，是学习者提升前端开发技能和网站交互设计能力的重要环节。 首先，我们要理解招聘网站特效制作涉及的关键技术点： 1. HTML与CSS基础：HTML（超文本标记语言）用于...

    jquery购买汽车多条件分类参数筛选特效源码.zip

    描述 "jquery购买汽车多条件分类参数筛选特效源码.zip" 重申了这个项目的核心是提供一个筛选特效的源码，可能包括了动态过滤、滑块选择、下拉菜单等多种用户界面元素，以实现高效且美观的筛选体验。特效部分可能涉及...

    Java_Web开发实战1200例第1卷.part3

    1.1 JDK开发工具包 3 1.2 Tomcat服务器 8 1.3 Linux系统配置JDK与Tomcat服务器 16 第2章 Java语言基础 20 2.1 基本语法 21 2.2 运算符 25 2.3 条件语句 29 2.4 循环控制 34 2.5 常用排序 42 2.6 算法应用 48 第3章 ...

    惠业JAVA EE+3G.docx

    3. JavaWEB高级开发：探索Servlet过滤器和监听器，开发国际化WEB应用，使用JavaBean，以及资源包。 **项目案例** 继续通过实践项目提升技能，例如： - 实现特定的WEB特效，如QQ菜单、表单验证等。 - 开发连连看...

    Java_Web开发实战1200例第1卷.part2

    1.1 JDK开发工具包 3 1.2 Tomcat服务器 8 1.3 Linux系统配置JDK与Tomcat服务器 16 第2章 Java语言基础 20 2.1 基本语法 21 2.2 运算符 25 2.3 条件语句 29 2.4 循环控制 34 2.5 常用排序 42 2.6 算法应用 48 第3章 ...

    jquery教程 15天学会jquery(完整版)

    **第3天：jQuery特效** 1. **动画效果**：掌握`.fadeIn()`, `.fadeOut()`, `.slideToggle()`等基本动画方法，以及`.animate()`自定义动画。 2. **CSS操作**：使用`.addClass()`, `.removeClass()`, `.toggleClass()...

    15天学会jQuery

    3. **实战项目**：通过实际项目，如响应式布局、表单验证、动态加载数据等，巩固所学知识，提升实际开发能力。 在这个15天的学习过程中，你将逐步掌握jQuery的核心概念和实用技巧，为JavaScript编程打下坚实的基础...

    jQuery权威指南-源代码

    书名：jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强） 作者：陶国荣　著 书号：978-7-111-32543-7 定价：59.00元 出版社：机械工业出版社华章公司 出版时间：2011年1月 编辑推荐：...

    jQuery文本框联想补全自动完成插件.zip

    3. 匹配算法：根据用户输入的字符，对数据源进行过滤，找出匹配的建议项。 4. 显示结果：将匹配的结果以特定的样式显示在文本框下方，通常是一个下拉列表形式。 5. 用户交互：用户选择建议项后，自动填充到文本框...

    李炎恢的jquery教程pdf合集

    16. **实战项目**：通过实际项目演练，将所学知识应用于网页开发，提升实战能力。 通过李炎恢老师的jQuery教程，不仅可以系统学习jQuery的基础知识，还能掌握实际项目中的应用技巧，为成为一名熟练的前端开发者打下...

    史上最好传智播客就业班.net培训教程60G 不下会后悔

    学完了这阶段课程，学员将学会开发主流网站的前端效果，比如：焦点图、滚动展示图、网页防复制、网页自定义菜单、WebOS、美女时钟、无刷新评论、评分控件、表格特效、图片悬浮详细信息、微博界面、QQ消息框效果、Div...

    jquery学习-15day

    1. **jQuery Effects**：使用`.show()`, `.hide()`, `.toggle()`等方法实现简单的显示和隐藏动画。 2. **队列与延迟**：理解`.queue()`, `.dequeue()`, `.delay()`等方法在动画序列中的作用。 **第10-11天：事件...

    jquery ui 1.8.9最新版

    3. **多媒体**：下拉菜单用于过滤搜索结果，工具提示可以为媒体播放器的控制按钮提供帮助信息。 总结，jQuery UI 1.8.9 是一个功能强大且易于使用的用户界面库，其丰富的组件和主题设计为开发者提供了极大的便利。...

    黑马程序员安卓Android52期培训课

    2014/12/11 星期四 css/JAVAScript基础 2014/12/12 星期五 2014/12/13 星期六 javaScript基础&DOM 2014/12/14 星期日 javaScript基础&DOM 2014/12/15 星期一 2014/12/16 星期二 DOM/xml基础 2014/12/17 星期三 xml...

    JQuery培训教程

    - **插件开发**: jQuery插件通常通过扩展jQuery对象来实现。一个简单的插件格式是：`$.fn.myPlugin = function(options) {...}`。 - **第三方插件**: jQuery生态系统中有大量成熟插件，如Bootstrap的弹出框、轮播图...

    JDK1.8源码及API.zip

    《深入探索JDK1.8：源码、API与实战》 JDK1.8，全称为Java Development Kit 1.8，是Oracle公司推出的Java编程语言的重要版本，它引入了许多创新特性，对开发者的工作效率产生了深远影响。在这个版本中，Java语言在...

Magicbox
Global site tag (gtag.js) - Google Analytics