web随堂笔记

116 阅读1分钟

今天学习了

1.Z-index属性

2.透明度元素opacity:x

3.css过渡效果:transition

下面是详细介绍

1.Z-index属性 用来调节元素定位重叠时的上下位置关系

通常情况下z-index默认值都为0 设置了position属性时z-index的属性可以调节元素之间的重叠位置;z-index值大的位于层次低的上方 image.png

image.png

2.透明度元素opacity:x(x值为0~1 越小越透明)

image.png

IE低版本支持的透明度格式为:alpha(opacity=x)。只有在低版本生效

3.css过渡效果:transition

是一种动画的转变过程 格式为transition:{动态变化属性 变化完成所需要时间 变化所需的函数 变化出现的延迟时间}

当有多种变换方式时 transition使用all

image.png

效果速度的规定

1-linear 默认相同速度开始结束的效果

2-ease 慢速开始 然后变快 慢速结束的效果

3-ease-in 慢速开始 结束时加快

4-ease-out 开始很快 结束变慢

5-ease-in-out慢速开始和结束

image.png