首先这里用到的知识是transition
过渡:从一种样式逐渐改变为另一种的样式效果
从图来看,是高度发生了变化,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="">
<style>
*{
padding: 0;margin: 0;
}
a{text-decoration: none;}
.nav{
width: 320px;
height: 50px;
margin: 50px auto;
}
.nav li{
float: left;
width: 100px;
height: 50px;
margin-right: 10px;
background-color: pink;
line-height: 50px;
text-align: center;
}
.nav .mr0{
margin-right: 0;
}
.nav li a{
display: block;
width: 100%;
height: 100%;
color: #fff;
font-size: 20px;
}
.nav > li:nth-child(2){
position: relative;
}
.nav .list{
position: absolute;
overflow: hidden;/*必须用overflow,不然内容会挤出去,就算设置高度为零也没意义*/
top: 50px;
left: 0;
height:0;
transition: 1s;
}
.nav > li:nth-child(2):hover .list{
height: 200px;
}
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="">首页</a></li>
<li><a href="">衣服</a>
<ul class="list">
<li><a href="">夹克</a></li>
<li><a href="">衬衫</a></li>
<li><a href="">羽绒服</a></li>
<li><a href="">毛线衣</a></li>
</ul>
</li>
<li class="mr0"><a href="">裤子</a></li>
</ul>
</body>
</html>
下面具体谈谈transition 样式的一种变化,需要注意的是transition不会自己变化,需要配合hover才能变化
1属性
transition-property想要过渡的属性名称,不写就是过渡全部
transition-duration过渡花费的时间
transition-delay 延迟时间,过一下再过渡
transition-timing-function速度曲线 ease(默认,慢速开始,然后加快,结束变慢) linear(匀速) ease-in(规定以慢速开始的效果) ease-out(慢速结束的过渡效果) ease-in-out(慢速开始和结束的过渡效果) ease-in-out和ease的区别是中间加速不一样
复合属性:名称,花费的时间 速度 延迟时间;中间为空格
2transition
能过渡的属性:(想要谁过渡,就在谁原始身上加,不要在变换后加,不能在写hover时加)大小,颜色,透明度,背景图片(有点特殊,是原来图片变淡,另一个图片出来,类似透明度,一般不使用)
不能过渡的属性:display
想要hover后,元素慢慢显示,
如果仅仅是visibility+transition,那么开始和display一样是立即显示,但是和display不一样的是,display在鼠标撤离元素没hover时立即消失,而visibility会过段时间消失
visibility:hidden和display:none的区别
display:none是完全消失,页面hover不到,并且造成其他属性没有效果
visibility:hidden也是消失,但是存在于页面上,也hover不到,并不会影响别的属性。一般配合opacity和position使用,即要从消失到可以慢慢显现,必须用visibility而不是display