基本结构
<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-mod