首先这里用到的知识是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