菜单下拉列表怎么实现慢慢出现效果-----过渡(transition)

菜单下拉列表怎么实现慢慢出现效果-----过渡(transition)_第1张图片

首先这里用到的知识是transition

过渡:从一种样式逐渐改变为另一种的样式效果

从图来看,是高度发生了变化,













    

下面具体谈谈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




你可能感兴趣的:(html,transition,小白)