[刘阳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工作区中任何一个文件,你只需要输入你想查找的文件名字即可,而且绝对支持模糊检索 ...
随机推荐
- 【NX二次开发】多种变换
变换的种类: uf5942 矩阵乘积变换 uf5943 平移变换 uf5944 缩放变换 uf5945 旋转变换 uf5946 镜像变换 最后使用 uf5947 实现uf5942-uf5946的变换. ...
- 【ElasticSearch】给ElasticSearch数据库配置慢查询日志
给ElasticSearch引擎配置慢查询日志,可以实时监控搜索过慢的日志.虽然ElasticSearch以快速搜索而出名,但随着数据量的进一步增大或是服务器的一些性能问题,会有可能出现慢查询的情况. ...
- noip2012 总结
Vigenère 密码 题目描述 16 世纪法国外交家 Blaise de Vigenère 设计了一种多表密码加密算法――Vigenère 密码.Vigenère 密码的加密解密算法简单易用,且破译 ...
- 带你掌握4种Python 排序算法
摘要:在编程里,排序是一个重要算法,它可以帮助我们更快.更容易地定位数据.在这篇文章中,我们将使用排序算法分类器对我们的数组进行排序,了解它们是如何工作的. 本文分享自华为云社区<Python ...
- Android系统编程入门系列之清单文件
在上一篇文章中已经提到,Android系统加载应用程序之后,首先会读取该应用程序的AndroidManifest.xml清单文件,之后根据该清单文件加载后边的东西.所以要开发应用程序,自然要先知道清单 ...
- ubuntu开机卡在/dev/sda* clean
问题描述: ①Ubuntu通过再生龙从一台笔记本还原到另外一台笔记本(硬盘到硬盘),开机后卡在自检界面: ②备份前的笔记本为17年发布的笔记本,还原后的笔记本为2020款发布的笔记本 从网上搜了一大篇 ...
- vim安装及个性化配置
1.安装vim,并且vim命令的别名设置为vi yum install vim -y (如果不能识别vim命令,需要先安装vim) vi /etc/bashrc 或者 vi ~/.bashrc 在最后 ...
- 六、JavaSE语言基础之数组
一维数组(关键字[]) 关于数组的一些概念: 数组是多个基本数据有机组合形成一个复杂数据,是一个引用数据类型数据. 数组:装指定数量元素类型相同的数据的容器. 元素:在数组中,数组中的每个数据称之为数 ...
- Kubernetes之无头服务(headless)
己经看到如何使用服务来提供稳定的ip地址,从而允许客户端连接到支持服务的每个pod (或其他端点).到服务的每个连接都被转发到一个随机选择的pod上.但是如果客户端需要链接到所有的pod呢?如果后端的 ...
- 教你写百分九十的shell
本文章主要内容来自菜鸟教程 , 也添加了一些知识点 shell脚本? 在说什么是shell脚本之前,先说说什么是shell.shell是外壳的意思,就是操作系统的外壳.我们可以通过shell命令来操作 ...