[刘阳Java]_纯CSS代码实现内容过滤效果
继续我们技术专题课，我们今天给大家带来的是一个比较酷炫的“纯CSS代码实现内容过滤效果”，没有加入任何JS的效果。全部都是应用CSS3的新增选择器来实现的。先看效果截图
实现思路
- 上面的四个按钮是利用 radio + label 组合方式实现
- 下面的图片全部都通过左浮动方式排列
- 外层有一个最大的div，它来包含按钮+图片
- 当点击按钮的时候，我们通过 CSS3 的属性选择器 + 兄弟选择器来实现过滤效果，且也具备点击事件效果（牛逼）
完整的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body {
margin: 0;
text-align: center;
font-family: "微软雅黑";
background: #f5f5f5;
}
h1 {
text-align: center;
}
.container {
width: 90%;
margin: 0 auto;
}
input[type='radio'] {
display: none;
}
label {
width: 23%;
float: left;
text-align: center;
background: #FFFFFF;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
color: #222222;
padding: 0.5%;
margin: 0.5%;
margin-bottom: 30px;
cursor: pointer;
}
/* 选取紧接着男装后面的label标签 */
/* CSS3中选择器的新用法 */
input[type='radio'][id='men']:checked + label {
background: #6666ff;
}
input[type='radio'][id='men']:checked ~ .women, input[type="radio"][id="men"]:checked ~ .children {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
/* 选取紧接着女装后面的label标签 */
input[type="radio"][id="women"]:checked + label {
background: #ff4466;
}
input[type="radio"][id="women"]:checked ~ .men, input[type="radio"][id="women"]:checked ~ .children {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
/* 选取紧接着童装后面的label标签 */
input[type="radio"][id="children"]:checked + label {
background: #66dd99;
}
input[type="radio"][id="children"]:checked ~ .men, input[type="radio"][id="children"]:checked ~ .women {
width: 0;
height: 0;
padding: 0;
margin: 0;
opacity: 0;
}
.tile {
width: 23%;
float: left;
transition: all 1s;
margin: 0.5%;
padding: 0.5%;
background: #6666ff;
}
.tile img {
width: 100%;
}
</style>
</head>
<body>
<h1>纯CSS代码实现内容过滤效果</h1>
<div class="container">
<input type="radio" name="clothing" id="men" value="" />
<label for="men">男装</label>
<input type="radio" name="clothing" id="women" value="" />
<label for="women">女装</label>
<input type="radio" name="clothing" id="children" value="" />
<label for="children">童装</label>
<input type="radio" name="clothing" id="reset" value="" />
<label for="reset">重置</label>
<div class="tile men">
<img src="img/1.jpg" alt="">
</div>
<div class="tile women">
<img src="img/2.jpg" alt="">
</div>
<div class="tile men">
<img src="img/3.jpg" alt="">
</div>
<div class="tile children">
<img src="img/4.jpg" alt="">
</div>
<div class="tile men">
<img src="img/5.jpg" alt="">
</div>
<div class="tile women">
<img src="img/6.jpg" alt="">
</div>
<div class="tile women">
<img src="img/7.jpg" alt="">
</div>
<div class="tile children">
<img src="img/8.jpg" alt="">
</div>
<div class="tile men">
<img src="img/9.jpg" alt="">
</div>
<div class="tile children">
<img src="img/10.jpg" alt="">
</div>
<div class="tile women">
<img src="img/11.jpg" alt="">
</div>
<div class="tile children">
<img src="img/12.jpg" alt="">
</div>
<div class="tile men">
<img src="img/13.jpg" alt="">
</div>
<div class="tile men">
<img src="img/14.jpg" alt="">
</div>
<div class="tile children">
<img src="img/15.jpg" alt="">
</div>
<div class="tile women">
<img src="img/8.jpg" alt="">
</div>
</div>
</body>
</html>
[刘阳Java]_纯CSS代码实现内容过滤效果的更多相关文章
- [刘阳Java]_避开环境配置快速的使用Java的开发工具_第5讲
我们一般学习Java都应该遵循通过系统的命令工具来编译Java程序,然后对编译好Java程序进行运行,这个是非常好的习惯.但是随着后期学习Java技术的深入我们也得像Java的IDE工具屈服.所以,可 ...
- [刘阳Java]_第一个Java程序_第7讲
1. 其实第一个Java程序是很简单,但是当自己编写第一个Java程序时候需要注意如下几个内容: 理解Java程序的运行环境 校验你的Java环境变量是否能够运行你所写的第一个Java程序 理解Jav ...
- 纯CSS 实现tooltip 内容提示信息效果
Tooltip 也就是内容的提示信息,合理使用可以给用户比较好的体验. 实现方法有很多种,有很多JS 插件,我这里介绍的是纯CSS实现的方法,兼容性也比较靠谱,IE8+均可正常显示.实现方法也非常简单 ...
- [刘阳Java]_Spring IOC程序代码如何编写_第3讲
第2讲我们介绍了Spring IOC的基本原理,这篇文章告诉大家Spring IOC程序代码是如何编写的,从而可以更好的理解IOC和DI的概念(所有的Java类的初始化工作扔给Spring框架,一个J ...
- [刘阳Java]_为什么要前后端分离
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构.弹性计算架构.微服务架构.多 ...
- [刘阳Java]_酷炫视频播放器制作_JS篇
此文章是接着上次写的<酷炫视频播放器制作_界面篇>将其完善,我们主要给大家介绍一下如何利用JS脚本来控制视频的播放.为了让大家能够保持对要完成的功能有直接的了解,我们还是将效果图附到文章里 ...
- [刘阳Java]_快速搭建MyBatis环境_第2讲
1.MyBatis的环境配置 导入MyBatis包, mybatis-3.2.8.jar 导入MySQL驱动包, mysql-connector-java-5.1.24-bin.jar 创建表的实体类 ...
- [刘阳Java]_什么是MyBatis_第1讲
1.什么MyBatis,我们先通过百度百科先进行一个简单的了解 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation ...
- [刘阳Java]_斗胆介绍一下Eclipse快捷键大全[超详细]_第6讲
斗胆让我在这里介绍一下Eclipse快捷键有哪些 ctrl+shirt+r 打开资源 这组快捷键可以让你开打Eclipse工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...
随机推荐
- 用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈
用TVM在硬件平台上部署深度学习工作负载的端到端 IR 堆栈 深度学习已变得无处不在,不可或缺.这场革命的一部分是由可扩展的深度学习系统推动的,如滕索弗洛.MXNet.咖啡和皮托奇.大多数现有系统针对 ...
- 大型图像数据聚类匹配：ICCV2019论文解析
大型图像数据聚类匹配:ICCV2019论文解析 Jointly Aligning Millions of Images with Deep Penalised Reconstruction Conge ...
- nvGraph-NVIDIA图形库
nvGraph-NVIDIA图形库 数据分析是高性能计算的不断增长的应用.许多高级数据分析问题可以称为图形问题.反过来,当今许多常见的图形问题也可以称为稀疏线性代数.这是nvGraph的动机,它利用G ...
- C#中关于Cookie的理解
本文链接出自:https://www.cnblogs.com/xiangzhe-C/p/4230042.html 1.Cookie简介 Cookie 提供了一种在 Web 应用程序中存储用户特定信息的 ...
- python小知识，字典
知识融合在代码中 """ create:2020年12月20日 功能:字典的部分使用方法 """ #空字典 dic={} print(&qu ...
- postman 获取Json 返回值的某个键值并进行断言判定
前提: 当前接口返回的结果值为json格式 1.将响应正文信息copy 到 https://www.bejson.com/ 便于查看 2.取值并进行断言编写 //json对象解析取值 var jd ...
- Nebula 基于 ElasticSearch 的全文搜索引擎的文本搜索
本文首发于 Nebula Graph 公众号 NebulaGraphCommunity,Follow 看大厂图数据库技术实践. 1 背景 Nebula 2.0 中已经支持了基于外部全文搜索引擎的文本查 ...
- 彻底删除Docker
yum remove docker \ docker-client \ docker-client-latest \ docker-common \ docker-latest \ docker-la ...
- 【VBA】单元格插入图片，单元格删除图片
封装函数: Sub 插入产品形象(strRange As String, datebaseTu As String) Dim strJpg As String strJpg = datebaseTu ...
- HAOI2008 木棍分割 数据结构优化dp+二分答案
很久之前打的题,现在补篇博客 打滚动数组 #E. 木棍分割 Accepted 100 1712 ms 1512 KiB 2019-05-07 17:01:23 Short 不打滚动数组 #419. ...