文章目录
前言
此篇文章的进阶版，主要实现多个内容排列时从下到上过渡 或者 从左到右过渡。
思路：主要是利用flex布局的flex-direction属性和align-items属性。
flex-direction属性决定主轴的方向（即项目的排列方向）
align-items属性定义项目在交叉轴上如何对齐。
一、从下到上过渡（方案1）
1.先上效果图
2.代码如下（示例）：
html
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
css
.box {
background-color: pink;
width: 400px;
height: 400px;
display: flex;
flex-direction: column-reverse;
}
.box1 {
width: 400px;
height: 50px;
background-color: #142385;
transition: height 1s;
}
.box2 {
width: 400px;
height: 50px;
background-color: #159298;
transition: height 1s;
}
.box3 {
width: 400px;
height: 50px;
background-color: #42bcad;
transition: height 1s;
}
.box4 {
width: 400px;
height: 50px;
background-color: #66ffcc;
transition: height 1s;
}
.box1:hover,.box2:hover,.box3:hover,.box4:hover {
height: 300px;
}
二、从下到上过渡（方案2）
1.先上效果图
2.代码如下（示例）：
html
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
css
.box {
background-color: pink;
width: 400px;
height: 400px;
display: flex;
align-items: flex-end;
}
.box1 {
width: 400px;
height: 50px;
background-color: #142385;
transition: height 1s;
}
.box2 {
width: 400px;
height: 50px;
background-color: #159298;
transition: height 1s;
}
.box3 {
width: 400px;
height: 50px;
background-color: #42bcad;
transition: height 1s;
}
.box4 {
width: 400px;
height: 50px;
background-color: #66ffcc;
transition: height 1s;
}
.box1:hover,.box2:hover,.box3:hover,.box4:hover {
height: 300px;
}
三、从右向左过渡（方案1）
1.先上效果图
2.代码如下（示例）：
html
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
css
.box {
background-color: pink;
width: 400px;
height: 400px;
display: flex;
flex-direction: row-reverse;
}
.box1 {
width: 50px;
height: 400px;
background-color: #142385;
transition: width 1s;
}
.box2 {
width: 50px;
height: 400px;
background-color: #159298;
transition: width 1s;
}
.box3 {
width: 50px;
height: 400px;
background-color: #42bcad;
transition: width 1s;
}
.box4 {
width: 50px;
height: 400px;
background-color: #66ffcc;
transition: width 1s;
}
.box1:hover,
.box2:hover,
.box3:hover,
.box4:hover {
width: 300px;
}
四、从右向左过渡（方案2）
1.先上效果图
2.代码如下（示例）：
html
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
css
.box {
background-color: pink;
width: 400px;
height: 400px;
display: flex;
flex-direction: column;
align-items: flex-end;
}
.box1 {
width: 100px;
height: 100px;
background-color: #142385;
transition: width 1s;
}
.box2 {
width: 100px;
height: 100px;
background-color: #159298;
transition: width 1s;
}
.box3 {
width: 100px;
height: 100px;
background-color: #42bcad;
transition: width 1s;
}
.box4 {
width: 100px;
height: 100px;
background-color: #66ffcc;
transition: width 1s;
}
.box1:hover,.box2:hover,.box3:hover,.box4:hover {
width: 400px;
}