CSS3——小米商城主页通过控制高度达到过度动画
首先确定大致结构,购物车中下拉的元素cart-list和购物车a元素互为兄弟元素
<ul class="header-right">
<li><a href="">登录 <span>|</span></a></li>
<li><a href="">注册 <span>|</span></a></li>
<li><a href="">消息通知</a></li>
<li class="cart">
<a href=""><i class="fa fa-cart-arrow-down" aria-hidden="true"></i> 购物车(0)</a>
<div class="cart-list">
购物车中还没有商品,赶紧选购吧!
</div>
</li>
</ul>
下面是css代码
/* 购物车 */
.cart{
position: relative;
width: 120px;
height: 40px;
background-color: #424242;
margin-left: 25px;
cursor: pointer;
transition: all .2s;
}
/* 购物车图标 */
.cart i{
margin-right: 4px;
}
.cart:hover{
background-color: #fff;
}
.cart:hover a{
color: #ff6700;
}
/* 购物车的下拉列表 */
.cart-list{
z-index: 850;
position: absolute;
top: 40px;
/* 默认是左对齐,现在修改为右对齐 */
right: 0;
width: 316px;
height: 0px;
color: #424242;
background-color: #fff;
box-shadow: 0.2px 2px 10px rgba(0,0,0, .15);
transition: all .3s;
/* 溢出的文字隐藏掉 */
overflow: hidden;
}
.cart:hover>.cart-list{
height: 100px;
line-height: 100px;
}
该代码原理,通过设置cart-list的高度为0.从而达到将整个标签隐藏的效果
需注意的是要设置溢出的元素处理方法
/* 溢出的文字隐藏掉 */
overflow: hidden;
紧接着可以设置过度动画
transition: all .3s;
再设置hover效果
.cart:hover>.cart-list{
height: 100px;
line-height: 100px;
}
这种相较于使用display:none;要能使用动画,过度,显示效果更好
下面来看看成品演示
QQ录屏20220704173218
同理,同样适用的还有小米商城顶部导航栏的下载APP的按钮
QQ录屏20220704173053
<li>
<a href="">下载app</a><span>|</span>
<div class="download">
<a href="#">
<img src="./images/download.png" alt="" width="90" height="90">
<p>小米商城app</p>
</a>
</div>
<div class="triangle"></div>
</li>
.download{
z-index: 900;
position: absolute;
top: 40px;
left: 50%;
margin-left: -62px;
width: 124px;
height: 0px;
background-color: #fff;
box-shadow: 0 1px 5px #ccc;
overflow: hidden;
transition: all .3s;
/* line-height: 148px; */
}
/* 二维码 */
.download img{
width: 90px;
margin: 18px 0 12px;
}
.download p{
color: #333;
font-size: 14px;
line-height: 14px;
}
.header-left>li:hover>.download{
height: 148px;
}