今天在CodePen
[codepen.io] 上面发现了一个使用css实现的一个手风琴效果, 感觉蛮有意思的,于是自己尝试了一下,发现不是特别难, 在编码前把思路整理好,再去实现,就会发现轻松许多.
先看一下效果吧,大家提前玩玩,然后我们在一步一步去实现这个效果. 本文会将一些基础的css顺带讲解到, 并将一些写css相关的设计网站资源进行分享.
效果:
盒子背景是一个渐变色
. 并且宽和高是浏览器视口的宽高
,那么我们就可以编写我们的css代码.然后手风琴的盒子相对于浏览器视口是水平垂直居
中的
flex布局
. 关于flex 的详细讲解可以查看这篇文章,通过图片和代码的结合,很容易理解. ==> juejin.cn/post/720689….vh
和 vw
, * {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 子元素水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 浏览器视口的宽高 */
width: 100vw;
height: 100vh;
/* 渐变 */
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
这时候打开页面是这样的.
然后我们接着来, 4张图片位于一个大盒子里面.
<div class="contain">
<div class="option active" style="--url:url(./image/1.jpg);" id="item1">
</div>
<div class="option" style="--url:url(./image/2.jpg);" id="item2">
</div>
<div class="option" style="--url:url(./image/3.jpg);" id="item3">
</div>
<div class="option" style="--url:url(./image/4.jpg);" id="item4">
</div>
</div>
然后编写css代码
option
类)的盒子宽度是很小的, 然后图片居中,平铺,不重复.自动撑开外面大盒子剩余空间
==> flex-grow
属性 body .contain .option {
min-width: 80px;
margin: 10px;
background: var(--url);
/* 图片覆盖 平铺*/
background-size: cover;
/* 图片位置 */
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 10px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.active {
flex-grow: 10;
}
flex-grow
是一个CSS属性,用于指定Flexbox布局中flex子项的增长因子。当父容器的空间大于子项所需的总空间时,flex-grow
决定了如何分配额外的空间。
flex-grow
的值是一个正数,表示子项的增长能力。flex-grow
总和为1,那么每个子项将根据其 flex-grow
值占剩余空间的比例增长。flex-grow
值大于1,子项将尝试占据更多空间,相对于 flex-grow
值较小的子项。例如,如果有三个子项,它们的 flex-grow
分别为1、2和3,那么当父容器有额外空间时,第二个子项将尝试占据第一个子项两倍的空间,第三个子项将尝试占据第一个子项三倍的空间。
在该页面中,主要的作用就是,设置active类的元素, 即设置flex-grow 的元素的宽度将会自动占据父容器余下的空间.
前面的铺垫已经做好了. 剩下就该js出手了.主要需要完成的事情有:
.active
类, 其他元素如果有.active
,就要移除.这里我们可以采取事件委托的方式处理点击事件.
事件委托是一种事件处理模式,其中一个事件监听器被添加到父元素上,用于处理其子元素的事件。这样做的好处包括:
const contain = document.querySelector('.contain') // 手风琴盒子
const optionList = document.querySelectorAll('.option') // 图片盒子类数组
contain.addEventListener('click', (e) => {
// 当e.target 是.option的时候,就会触发,否则不会触发
if (e.target.classList.contains('option')) {
optionList.forEach(el => {
el.classList.remove('active');
});
e.target.classList.add('active');
e.stopPropagation(); // 阻止事件冒泡
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* 子元素水平垂直居中 */
display: flex;
justify-content: center;
align-items: center;
/* 浏览器视口的宽高 */
width: 100vw;
height: 100vh;
/* 渐变 */
background-color: #8EC5FC;
background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
}
body .contain {
display: flex;
width: 800px;
height: 400px;
/* 子元素的间距 */
}
body .contain .option {
min-width: 80px;
margin: 10px;
background: var(--url);
/* 图片覆盖 平铺*/
background-size: cover;
/* 图片位置 */
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
border-radius: 10px;
transition: 0.5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
}
.active {
flex-grow: 10;
}
</style>
</head>
<body>
<div class="contain">
<div class="option active" style="--url:url(./image/1.jpg);" id="item1">
</div>
<div class="option" style="--url:url(./image/2.jpg);" id="item2">
</div>
<div class="option" style="--url:url(./image/3.jpg);" id="item3">
</div>
<div class="option" style="--url:url(./image/4.jpg);" id="item4">
</div>
</div>
<script>
const contain = document.querySelector('.contain')
const optionList = document.querySelectorAll('.option')
contain.addEventListener('click', (e) => {
// 当e.target 是.option的时候,就会触发,否则不会触发
if (e.target.classList.contains('option')) {
optionList.forEach(el => {
el.classList.remove('active');
});
e.target.classList.add('active');
e.stopPropagation(); // 阻止事件冒泡
}
});
</script>
</body>
</html>