基本结构
<div class="header">
<div class="inner">
<a href="#">标题栏</a>
</div>
</div>
1、自上而下
scss:被注释的部分是另外一种自下而上的情况。
.header {
width: 100%;
height: 150px;
background-image: url(../../assets/1.jpg);
background-repeat: no-repeat;
background-size: 100% 150px;
/*display: flex;
align-items: flex-end;*/
img{
width: 100%;
height: 150px;
}
.inner {
/*display: none;*/
visibility: hidden;
/*width: 100%;
height: 28px;
transition: height 2s;*/
}
&:hover{
.inner {
/*visibility:visible;
background-color:rgba(0,0,0,.6);
height: 100%;*/
width:100%;
height: 150px;
background-color:rgba(0,0,0,.6);
display: block;
color: white;
position:relative;
animation:mymove 3s infinite;
animation-fill-mode: forwards;
animation-iteration-count:1;
a{
color: white;
&:hover{
color: yellow;
}
}
}
@keyframes mymove {
from{height: 0px;}
to{height: 150px;}
}
@-moz-keyframes mymove {
from{height: 0px;}
to{height: 150px;}
}
@-webkit-keyframes mymove {
from{height: 0px;}
to{height: 150px;}
}
@-o-keyframes mymove {
from{height: 0px;}
to{height: 150px;}
}
}
}
2、自下而上
主要是利用父容器的display:flex;与子容器设置初始高度,然后通过动画实现自下而上的效果,简化后的代码是:
.header {
width: 100%;
height: 150px;
background-image: url(../../assets/1.jpg);
background-repeat: no-repeat;
background-size: 100% 150px;
display: flex;
align-items: flex-end;
img{
width: 100%;
height: 150px;
}
.inner {
visibility: hidden;
width: 100%;
height: 28px;
transition: height 2s;
}
&:hover{
.inner {
visibility:visible;
background-color:rgba(0,0,0,.6);
height: 100%;
a{
color: white;
&:hover{
color: yellow;
}
}
}
}
}