各位网友大家好,今天我要带领大家开发一个纯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的不透明度*/ }
至此,此页面特效的所有样式代码都编写完了,真心希望大家能受到启发,同时也希望大家喜欢我的教程。
谢谢大家,咱们下个实战开发案例再会。
相关推荐
HTML5+CSS3小实例:纯CSS实现文字组成肖像特效
这是一款使用纯css3制作的图片分类过滤效果插件。该插件可以过滤出所有图片中的某一类图片。该图片分类过滤共有三种效果:图片模糊效果,图片缩小模糊效果和放大缩小效果。
CSS3实现烟花特效-图片+css
本书英文版书名《Practical CSS3:Developand Design》,作者Chris Mills是一名杰出的Web技术专家、Web开放标准的布道者和Web教育变革者。他创立了Opera网络标准课程,是W3C网络教育社区组的联职主席。贯穿本书的一...
纯CSS实现的鼠标触及显示边框和描述的图片特效
基于HTML5和CSS3的图片特效,它可以很方便地将各种图片进行归类和过滤,在归类过滤的过程中,图片有非常酷的动画效果,并且,结合CSS3的特性,这里一共提供了3种炫酷的图片过滤动画,议使用谷歌或火狐浏览器.
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
使用CSS3 圆角技术实现。 使用CSS3样式单词:border-radius 语法: div{border-radius:5px} 对图片设置圆角样式: .abc img{border-radius:5px} 设置class=”abc”对象图片四个角圆角为5px 三、CSS...
这是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效。该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被缩小,效果非常的不错。
CSSgram是一款实现类似Instagram应用的图片过滤特效的CSS库。该CSS库使用伪元素来创建图片过滤效果,它内置有13种不同的图片过滤特效,可用于网页图片的美化。
纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效 纯CSS图片 切换特效
纯CSS3炫酷圆形头像图片过滤特效源码是一款效果非常酷的纯CSS3炫酷圆形头像图片过滤特效的代码。该特效将图片制作为圆形图片,以网格形式布局,带点击相应的分类按钮后,该类别的图片被放大显示,其它类别的图片被...
纯css3实现多款鼠标经过显示附加特效文字动画特效代码
纯CSS3实现的DIV高亮显示效果,无图片
本源码是一款非常有创意的纯CSS3导航菜单特效的代码。该导航菜单主要通过CSS3 transform和transition方法实现效果,非常简单。该特效由進擊的燊提供。本代码适用浏览器:搜狗、360、FireFox、Chrome、Safari、Opera...
纯css3实现骰子3D翻转特效是一款自动翻转的3d色子动画效果下载。
354个CSS3特效源码,涵盖几乎所有网页常见CSS3特效,支持PC端和移动端。
CSS3图片全屏显示特效是一款css3实现图片全屏显示slider特效。 CSS3图片全屏显示特效图:
HTML5 CSS实现图片过滤特效是一款类似Instagram应用的图片过滤特效。