当前位置:Gxlcms > html代码 > Css3之高级-6Css过渡(概述、过度子属性)_html/css_WEB-ITnose

Css3之高级-6Css过渡(概述、过度子属性)_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:27人阅读

一、过度概述


过度概述

- 使得 CSS 的属性值在一段时间内平滑的过渡

- 比如,鼠标悬停后,背景色在 1s 之内,由白色平滑的过渡为红色

- 指定 4 个要素

- 指定过渡属性,如 background、color等

- 指定过渡所需时间

- 指定过渡函数,即过渡的速度、方式等

- 指定过渡延迟时间,表示开始执行的时间

- 触发过渡

- 通过用户的行为触发,如点击、悬浮等


过渡示例


触发过渡

- 过渡由用户的行为(如点击、悬浮等)触发

- 由元素的状态变化触发

- :hover、:active、:focus 等

- 由JavaScript 代码触发


二、过度子属性


过渡属性 transition-property

- transition-property 属性规定应用过渡效果的 CSS 属性的名称

- 当指定的 CSS 属性改变时,过渡效果将开始

- 语法

- transition-property: none | all | property;

- 可以设置过渡的属性

- 颜色属性

- 取值为数值的属性

- 转换属性

- 渐变属性

- visibility属性

- 阴影属性


过渡时间 transition-duration

- transition-duration 属性规定完成过渡效果需要花费的时间

- 以秒或毫秒计

- 语法

- transition-duration: s | ms;

- 默认值是0,意味着不会有效果

- 必须设置 transition-duration 属性,否则时长为0,就不会产生过渡效果


过渡函数 transition-timing-function

- transition-timing-function 属性规定过渡效果的速度曲线

- 取值为预定义函数或者贝塞尔曲线

- 语法

- transition-duration: function;

- 预定义函数

- ease: 默认值,慢速开始,快速变快,然后慢速结束

- linear: 以相同速度开始至结束

- ease-in:以慢速开始,加速效果

- ease-out:以慢速结束,减速效果

- ease-in-out:以慢速开始和结束,先加速再减速


过渡延迟 transition-delay

- transition-delay 属性规定过渡效果何时开始

- 即,当改变元素属性后多长时间开始执行过渡效果

- 以秒或毫秒计

- 语法

- transition-delay: s | ms;


简写属性 transition

- transition 属性是一个简写属性,用于设置四个过渡属性

- 语法

- transition: property duration timing-function delay;


多个过渡效果

- 为过渡子属性设置多个值,多个值之间用逗号隔开

- 为 transition 属性设置多个值,多个值之间用逗号隔开



总结:本章内容主要介绍了 Css过渡(概述、过度子属性)

人气教程排行