[刘阳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工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...
随机推荐
- Tengine MLOps概述
Tengine MLOps概述 大幅提高产业应用从云向边缘迁移的效率 MLOps Cloud Native 聚焦于提升云端的运营过程效率 MLOps Edge Native 聚焦于解决边缘应用开发及异 ...
- YOLOV4各个创新功能模块技术分析（二）
YOLOV4各个创新功能模块技术分析(二) 四.数据增强相关-GridMask Data Augmentation 论文名称:GridMask Data Augmentation 论文地址:https ...
- AMD Ryzen 5000‘Cezanne’APU
AMD Ryzen 5000'Cezanne'APU Spotted,Zen 3&7nm Vega芯片将在2021年前保留AM4支持 AMD Ryzen 5000 'Cezanne' APU ...
- IaaS、PaaS 和 SaaS：云服务模型概述
IaaS.PaaS 和 SaaS:云服务模型概述 为您的组织选择合适的云服务模型,可以帮助您充分利用预算和 IT 资源. 基础设施即服务 (IaaS).平台即服务 (PaaS) 以及软件即服务 (Sa ...
- Contos8 安装 MariaDb 时报错：Could not open mysql.plugin table: table mysql.plugin
导语: 因个人服务器误删了一些文件导致MariaDB崩溃,一直在报错,所以想着重装一下,没想到在重装后启动时再次报错(与之前报错不同),这次的报错原因大致是因为某些插件表找不到. 因此又开启了漫长的寻 ...
- mybatis——解决属性名和数据库字段名不一致问题
首先说一下,我的数据库名字叫mybatis,里边有一张user表,表中有三个字段,id.name.pwd:然后实体类中对应三个属性id.name.password(id和name跟数据库字段名一致,但 ...
- JDBCTemplate基本使用
用了jdbc连接池之后,我们会发现连接对象的复用性更高了,程序整体运行的性能也更高了.但是我们在做JDBC操作的时候还是比较麻烦,要定义sql,执行sql,设置参数,处理结果. 特别是当我们要做查询操 ...
- 三、部署被监控主机-Zabbix Agent
三.部署被监控主机-Zabbix Agent 1) 源码安装Zabbix agent软件 在2.100和2.200做相同操作(以zabbixclient web1为例). [root@zabbixcl ...
- robotframework常用关键字
robotframework关键字 可以将关键字看作是处理数据的方法.robotframework的关键字和测试数据组成了测试用例. robotframework关键字包括系统关键字和用户关键字.用户 ...
- Reactor3 中文文档（用户手册）
文章很长,建议收藏起来,慢慢读! 疯狂创客圈为小伙伴奉上以下珍贵的学习资源: 疯狂创客圈 经典图书 : <Netty Zookeeper Redis 高并发实战> 面试必备 + 大厂必备 ...