继续我们技术专题课，我们今天给大家带来的是一个比较酷炫的“纯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>