🍅 作者主页：Java李杨勇
🍅 简介：Java领域优质创作者🏆、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
效果演示：文末获取源码联系方式
代码目录：
主要代码实现：
css样式：
* {padding: 0;margin: 0;}ul {list-style: none;}.list {width: 1000px;height: 500px;margin: 150px auto 0;}.list li {/* float:left; 可以使块级元素宽度可以被内容撑开*/float: left;/* 不给宽高是因为内容会被撑开 */max-width: 700px;height: 500px;box-shadow: 0 0 10px #ccc;}/* 未选中时可以点击范围 */input {/* poacity:0；点击框透明度为0 */opacity: 0;/* cursor:pointer鼠标变为小手标记 */cursor: pointer;width: 100px;height: 500px;/* 点击时过渡效果 */transition: 0.2s;}/* 选中是宽700px */input:checked {width: 700px;}/* 背景图no-repeat不要平铺不要重复 center/cover居中/覆盖整个li */.list li:nth-child(1),.list ul :nth-child(1) .bj {background: url(../img/1.jpg) no-repeat center/cover;}.list li:nth-child(2),.list ul :nth-child(2) .bj {background: url(../img/2.jpg) no-repeat center/cover;}/* .list li:nth-child(1)和.list ul :nth-child(1)都是选择同一个元素，啥原理不清楚*/.list ul :nth-child(3),.list ul :nth-child(3) .bj {background: url(../img/3.jpg) no-repeat center/cover;}.list ul :nth-child(4),.list ul :nth-child(4) .bj {background: url(../img/4.jpg) no-repeat center/cover;}.list li .bj {/* 让全部.bj的背景变透明不显示于页面之上 */opacity: 0;position: absolute;top: 0;left: 0;/* 100vw=100%视口高度100vh=100%视口宽度*/width: 100vw;height: 100vh;/* 此时背景层级太高盖住.list了，用z-index让层级变成负数 */z-index: -1;/* css3滤镜效果 */filter: blur(2.3px);}/* 当点击input的时候inpu的兄弟.bj的背景就不透明了，显示于页面之上 */input[name="swith"]:checked~.bj {opacity: 1;}
html :
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>手风琴</title><link rel="stylesheet" href="./css/style.css"></head><body><div class="list"><ul><li><input type="radio" name="swith"><div class="bj"><div></div></div></li><li><input type="radio" name="swith" checked><div class="bj"><div></div></div></li><li><input type="radio" name="swith"><div class="bj"><div></div></div></li><li><input type="radio" name="swith"><div class="bj"><div></div></div></li></ul></div></body></html>
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取~！
打卡 文章 更新44/ 100天
精彩推荐更新中：
HTML5大作业实战案例《100套》
Java毕设项目精品实战案例《100套》
