Article directory
foreword
The advanced version of this article mainly realizes the transition from bottom to top or from left to right when multiple contents are arranged.
Idea: Mainly use the flex-direction attribute and align-items attribute of flex layout.
The flex-direction attribute determines the direction of the main axis (that is, the direction in which items are arranged) and
the align-items attribute defines how items are aligned on the cross axis.
1. Transition from bottom to top (Scheme 1)
1. First upload the renderings
2. The code is as follows (example):
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. Transition from bottom to top (Scheme 2)
1. First upload the renderings
2. The code is as follows (example):
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;
}
3. Transition from right to left (Scheme 1)
1. First upload the renderings
2. The code is as follows (example):
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;
}
4. Transition from right to left (Scheme 2)
1. First upload the renderings
2. The code is as follows (example):
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;
}