/* 使用过渡效果 */
transition: property duration timing-function delay
/* 例如: */
transition: background-color 2s ease-in-out 0.5s
其中,property表示需要过渡的属性,duration表示过渡时间,timing-function表示过渡效果,delay表示延迟时间。
也可以使用缩写的形式:
/* 使用缩写形式 */
transition: all 2s ease-in-out 0.5s
表示所有属性都过渡。
还有一个简写方式是:
transition:2s
它会使用默认值,即所有属性都过渡,过渡效果为"ease",没有延迟
background-attachment: fixedbackground-size: cover
实现背景图平铺展开,各自显示各自区域的背景图
上面transition: all 0.4s ease-in-out
下面opacity: 0.7transform: scale(0.99)
实现动画效果过度,缩放
opacity:x x值为0~1,值越小越透明,在ie低版本的不支持
filter:alpha(opacity=x) x值为0~100,值越小越透明, ie低版本支持filter:alpha(opacity=x)
background: rgba():也可以改变透明度,a的值为0~1,值为1时完全不透明
transition呈现的是一种过渡,是一种动画转换的过程,如渐现、渐弱、动画快慢等
过渡属性( transition-property ):transition-property 过渡或动态模拟的CSS属性,property:指定的CSS属性(width、height、background-color属性等)all:指定所有元素支持transition-property属性的样式,一般为了方便都会使用all
过渡所需的时间( transition-duration ):定义转换动画的时间长度,即从设置旧属性到换新属性所花费的时间,单位为秒(s)
过渡动画函数( transition-timing-function ):指定浏览器的过渡速度,以及过渡期间的操作进展情况,通过给过渡添加一个函数来指定动画的快慢方式
transition-delay 过渡开始出现的延迟时间
练习:
linear 规定以相同速度开始至结束的过渡效果
ease 规定慢速开始,然后变快,然后慢速结束的过渡效果(默认值)
ease-in 规定以慢速开始的过渡效果 (一开始会很慢 后面快结束的时候会加快)
ease-out 规定以慢速结束的过渡效果 (一开始会很快 后面快结束的时候会变慢)
ease-in-out 规定以慢速开始和结束的过渡效果
过渡延迟时间( transition-delay )正值:元素过渡效果不会立即触发,当过了设置的时间值后才会被触发 2s
负值:元素过渡效果会从该时间点开始显示,之前的动作被截断 速度会变快 -2s 会出现卡顿
0:默认值,元素过渡效果立即执行
调整元素定位时重叠层的上下位置
z-index属性值:整数,默认值为0
设置了position属性时,z-index属性可以设置各元素之间的重叠高低关系,z-index值大的层位于其值小的层上方
总结:网页中的元素都含有两个堆叠层级,未设置绝对定位时所处的环境,z-index是0,设置绝对定位时所处的堆叠环境,此时层的位置由z-index的值确定,改变设置绝对定位和没有设置绝对定位的层的上下堆叠顺序,只需调整绝对定位层的z-index值即可。