个人名片：
😊作者简介：一名大一在校生，web前端开发专业
🤡 个人主页：几何小超
🐼座右铭：懒惰受到的惩罚不仅仅是自己的失败，还有别人的成功。
🎅**学习目标: 坚持每一次的学习打卡，学好前端
今天需要做的是原神的手风琴，看其他挺好玩，我就做了一个，现在还是把展示图放出来吧哈哈，因为本人也是个二次元LSP
点击之后实现悬浮效果，看起来挺好看的，然后让咱们一起来设置
架构
这个布局相对于简单一点，有一个大盒子shell
里面放了一个版心card
然后把图片放盒子里面
下面的文字放另外一张盒子里面
<div class="shell">
<div class="card">
<div class="box">
<img src="./img/1.png" />
</div>
<div class="character">
<img src="./img/1.png" />
</div>
<h4>凝光</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/3.png" />
</div>
<div class="character">
<img src="./img/3.png" />
</div>
<h4>多莉</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/4.png" />
</div>
<div class="character">
<img src="./img/4.png" />
</div>
<h4>刻晴</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/5.png" />
</div>
<div class="character">
<img src="./img/5.png" />
</div>
<h4>七七</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/6.png" />
</div>
<div class="character">
<img src="./img/6.png" />
</div>
<h4>纳西妲</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/8.png" />
</div>
<div class="character">
<img src="./img/8.png" />
</div>
<h4>雷电将军</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/7.png" />
</div>
<div class="character">
<img src="./img/7.png" />
</div>
<h4>可莉</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/10.png" />
</div>
<div class="character">
<img src="./img/10.png" />
</div>
<h4>芭芭拉</h4>
</div>
</div>
简单介绍一下架构之后，接下展示css代码，里面大量运用到了子集选择器，伪类选择器
介绍一下子集选择器><是指选择这个内容里面单独的内容
还是老规矩清除默认边距然后在加上css3盒子模型
给body设置弹性布局，然后缩放盒子大小，加上背景颜色，基本的样式就完成
然后其他的我相信大家都应该清除差不多了，不懂的再去查查资料这里就重点讲几个标签
今天的练习中遇到的两个新标签
object-fit 属性用于指定应如何调整 <img> 或 <video> 的大小以适合其容器。
这个属性告诉内容以不同的方式填充容器。比如“保留长宽比”或者“展开并占用尽可能多的空间
cube-bezier() 函数定义三次贝塞尔曲线（Cubic Bezier curve）。
三次贝塞尔曲线由 P0、P1、P2 和 P3 四个点进行定义。P0 和 P3 是曲线的起点和终点，在 CSS 中，这两个点是固定的，因为坐标是成比例。P0 为 (0, 0)，代表初始时间和初始状态，P3 为 (1, 1)，代表最终时间和最终状态。
伪类的话不用我多说了吧，详细情况还是查看W3C
这里是css代码
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
background-size: cover;
}
.shell{
width: 1700px;
margin: 0 auto;
margin-top: 5rem;
height: 750px;
display: flex;
}
.card{
flex-basis: 13%;
position: relative;
overflow: hidden;
}
.card:not(:nth(1)){
margin-left: 20px;
}
.card:hover{
overflow: initial;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .1s cubic-bezier(0.165,0.84,0.44,1);
overflow: hidden;
border-radius: 10px;
background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce);
}
.box>img{
object-fit: contain;
width: 100%;
height: 100%;
transform: translate(-50%,10% ) scale(3);
position: relative;
z-index: -1;
}
.card:hover>.box img{
opacity: 0;
}
.card:hover>.box{
transform: scaleY(1.5);
background-image: initial;
background-color: #7d419f;
z-index: 2;
cursor: pointer;
}
.card>h4{
position: absolute;
display: block;
width: 120px;
text-align: center;
color: rgba(255,255,255,0.2);
bottom: 0;
left: 50%;
transform: translate(-50%, -35%);
font-size: 28px;
z-index: 100;
transition: .2s;
}
.card:hover h4{
color: #fff;
transform: translate(-50%,250%);
}
.card:hover .character>img{
opacity: 1;
}
.card>.character{
position: absolute;
top: -100px;
left: -400px;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.character>img{
width: 820px;
height: 820px;
object-fit: contain;
opacity: 0;
transition: all .3s;
position: relative;
z-index: -10;
}
这里提供源码，大家可以尝试一边理解一边来写哦，嘻嘻
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-image: linear-gradient(120deg,#e0c3fc 0%,#8ec5fc 100%);
background-size: cover;
}
.shell{
width: 1700px;
margin: 0 auto;
margin-top: 5rem;
height: 750px;
display: flex;
}
.card{
flex-basis: 13%;
position: relative;
overflow: hidden;
}
.card:not(:nth(1)){
margin-left: 20px;
}
.card:hover{
overflow: initial;
}
.box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: all .1s cubic-bezier(0.165,0.84,0.44,1);
overflow: hidden;
border-radius: 10px;
background-image: linear-gradient(100deg,#a18cd1,#fcaa55c,#141414ce);
}
.box>img{
object-fit: contain;
width: 100%;
height: 100%;
transform: translate(-50%,10% ) scale(3);
position: relative;
z-index: -1;
}
.card:hover>.box img{
opacity: 0;
}
.card:hover>.box{
transform: scaleY(1.5);
background-image: initial;
background-color: #7d419f;
z-index: 2;
cursor: pointer;
}
.card>h4{
position: absolute;
display: block;
width: 120px;
text-align: center;
color: rgba(255,255,255,0.2);
bottom: 0;
left: 50%;
transform: translate(-50%, -35%);
font-size: 28px;
z-index: 100;
transition: .2s;
}
.card:hover h4{
color: #fff;
transform: translate(-50%,250%);
}
.card:hover .character>img{
opacity: 1;
}
.card>.character{
position: absolute;
top: -100px;
left: -400px;
width: 100%;
height: 100%;
z-index: 3;
pointer-events: none;
}
.character>img{
width: 820px;
height: 820px;
object-fit: contain;
opacity: 0;
transition: all .3s;
position: relative;
z-index: -10;
}
</style>
</head>
<body>
<div class="shell">
<div class="card">
<div class="box">
<img src="./img/1.png" />
</div>
<div class="character">
<img src="./img/1.png" />
</div>
<h4>凝光</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/3.png" />
</div>
<div class="character">
<img src="./img/3.png" />
</div>
<h4>多莉</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/4.png" />
</div>
<div class="character">
<img src="./img/4.png" />
</div>
<h4>刻晴</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/5.png" />
</div>
<div class="character">
<img src="./img/5.png" />
</div>
<h4>七七</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/6.png" />
</div>
<div class="character">
<img src="./img/6.png" />
</div>
<h4>纳西妲</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/8.png" />
</div>
<div class="character">
<img src="./img/8.png" />
</div>
<h4>雷电将军</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/7.png" />
</div>
<div class="character">
<img src="./img/7.png" />
</div>
<h4>可莉</h4>
</div>
<div class="card">
<div class="box">
<img src="./img/10.png" />
</div>
<div class="character">
<img src="./img/10.png" />
</div>
<h4>芭芭拉</h4>
</div>
</div>
</body>
</body>
</html>
