CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose
各位网友大家好，今天我要带领大家开发一个纯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="/static/imghw/default1.png" data-src="imgs/101.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-1" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/102.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-7" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/103.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/104.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-5" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/105.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-4" href="http://www.itdriver.cn"> <img src="/static/imghw/default1.png" data-src="imgs/106.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/107.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-4" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/108.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/109.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-3" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/110.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/111.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/112.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/113.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/114.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-1" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/115.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-5" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/116.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-6" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/117.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </a> <a class="item-type-2" href="http://www.itdriver.cn"> <i></i> <img src="/static/imghw/default1.png" data-src="imgs/118.png" class="lazy" / alt="CSS3实战开发: 纯CSS实现图片过滤分类显示特效_html/css_WEB-ITnose" > </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的不透明度*/}至此，此页面特效的所有样式代码都编写完了，真心希望大家能受到启发，同时也希望大家喜欢我的教程。
谢谢大家，咱们下个实战开发案例再会。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
四款值得推荐的AI辅助编程工具
Apr 22, 2024 pm 05:34 PM
这个AI辅助编程工具在这个AI迅速发展的阶段，挖掘出了一大批好用的AI辅助编程工具。AI辅助编程工具能够提高开发效率、改善代码质量、降低bug率，是现代软件开发过程中的重要助手。今天大姚给大家分享4款AI辅助编程工具（并且都支持C#语言），希望对大家有所帮助。https://github.com/YSGStudyHards/DotNetGuide1.GitHubCopilotGitHubCopilot是一款AI编码助手，可帮助你更快、更省力地编写代码，从而将更多精力集中在问题解决和协作上。Git
夸克如何打开过滤重复文件
Mar 01, 2024 am 11:25 AM
使用夸克浏览器时，其中有一个过滤重复文件的功能，有些朋友对此还不是很了解，下面为大家介绍一下打开这个功能的操作方法，感兴趣的朋友和我一起来看看吧。1.首先在手机中点击“夸克浏览器”进入界面后，在页面中间的选项里点击选择“夸克网盘”打开进入。2.在夸克网盘界面里下方部分找到“备份设置”，并在上面点击打开，如下图所示位置：3.接下来在进入的页面里有一个“过滤重复文件”，在它的后面显示有一个开关按钮，在上面点击圆形的滑块把它设置为彩色即为开启该功能，继续备份文件时将会跳过重复的文件来节省网盘容量。
AI程序员哪家强？探索Devin、通义灵码和SWE-agent的潜力
Apr 07, 2024 am 09:10 AM
2022年3月3日，距世界首个AI程序员Devin诞生不足一个月，普林斯顿大学的NLP团队开发了一个开源AI程序员SWE-agent。它利用GPT-4模型在GitHub存储库中自动解决问题。SWE-agent在SWE-bench测试集上的表现与Devin相似，平均耗时93秒，解决了12.29%的问题。SWE-agent通过与专用终端交互，可以打开、搜索文件内容，使用自动语法检查、编辑特定行，以及编写和执行测试。（注：以上内容为原内容微调，但保留了原文中的关键信息，未超过指定字数限制。）SWE-A
学习如何利用Go语言开发移动应用程序
Mar 28, 2024 pm 10:00 PM
Go语言开发移动应用程序教程随着移动应用市场的不断蓬勃发展，越来越多的开发者开始探索如何利用Go语言开发移动应用程序。作为一种简洁高效的编程语言，Go语言在移动应用开发中也展现出了强大的潜力。本文将详细介绍如何利用Go语言开发移动应用程序，并附上具体的代码示例，帮助读者快速入门并开始开发自己的移动应用。一、准备工作在开始之前，我们需要准备好开发环境和工具。首
PHP实战：快速实现斐波那契数列的代码示例
Mar 20, 2024 pm 02:24 PM
PHP实战：快速实现斐波那契数列的代码示例斐波那契数列是数学中一个非常有趣且常见的数列，其定义如下：第一个和第二个数为0和1，从第三个数开始，每个数都是前两个数的和。斐波那契数列的前几个数字依次为0,1,1.2,3,5,8,13,21,...依此类推。在PHP中，我们可以通过递归和迭代两种方式来实现斐波那契数列的生成。下面我们分别来展示这两
Android开发最适合的Linux发行版是哪个？
Mar 14, 2024 pm 12:30 PM
Android开发是一项繁忙而又令人兴奋的工作，而选择一个适合的Linux发行版来进行开发则显得尤为重要。在众多的Linux发行版中，究竟哪一个最适合Android开发呢？本文将从几个方面来探讨这一问题，并给出具体的代码示例。首先，我们来看一下目前流行的几个Linux发行版：Ubuntu、Fedora、Debian、CentOS等，它们都有各自的优点和特点。
了解VSCode：这款工具到底是用来干什么的？
Mar 25, 2024 pm 03:06 PM
《了解VSCode：这款工具到底是用来干什么的？》作为一个程序员，无论是初学者还是资深开发者，都离不开代码编辑工具的使用。在众多编辑工具中，VisualStudioCode（简称VSCode）作为一款开源、轻量级、强大的代码编辑器备受开发者欢迎。那么，VSCode到底是用来干什么的？本文将深入探讨VSCode的功能和用途，并提供具体的代码示例，以帮助读者
Go语言前端技术探秘：前端开发新视野
Mar 28, 2024 pm 01:06 PM
Go语言作为一种快速、高效的编程语言，在后端开发领域广受欢迎。然而，很少有人将Go语言与前端开发联系起来。事实上，使用Go语言进行前端开发不仅可以提高效率，还能为开发者带来全新的视野。本文将探讨使用Go语言进行前端开发的可能性，并提供具体的代码示例，帮助读者更好地了解这一领域。在传统的前端开发中，通常会使用JavaScript、HTML和CSS来构建用户界面
