CSS3 过渡
版权声明:未经博主授权,内容严禁转载分享
什么是过渡
使得 CSS 的属性值在一段时间内平滑的过渡。
- 比如,鼠标悬停后,背景在 1s 之内,由白色平滑的过渡为红色。
指定 4 个要素
- 指定过渡属性,比如 background 、 color 等。
- 指定过渡所需要的时间。
- 指定过渡函数,即过渡的速度、方式等。
- 指定过渡延时时间,表示开始执行的时间。
触发过渡:
- 通过用户的行为触发,比如点击、悬浮等。
代码案例
<style media="screen"> #d1{ width: 150px; height: 150px; border: 1px solid black; /* 背景色过渡,3秒变换,线性过渡,一秒后开始 */ transition: background 3s linear 1s; } /* 鼠标移上 */ #d1:hover{ background:red; } </style> <div id="d1"></div>
过渡的子属性
transition-property 属性规定应用过渡效果的 CSS 属性名称。
- 当指定的 CSS 属性改变时,过渡效果开始。
语法
- transition-property:none / all / property;
可以设置过渡属性
- 颜色属性
- 取值为数值的属性
- 转换属性
- 渐变属性
- visibility 属性
- 阴影属性
transition-duration:过渡时间。属性规定完成过渡效果需要花费的时间。
- 以秒或毫秒作单位。
语法
- transition-duration:s | ms ;
- 默认值是0,意味着不会有效果。
必须设置 transition-duration 属性,否则时长为0,就不会产生过渡效果。
案例代码
<style> #d1 { margin: auto; width: 100px; height: 100px; border: 1px solid #999999; transition: background 1s linear 100ms, border-radius 1s ease-in 200ms, width 1s linear 100ms, box-shadow 1s linear 100ms, transform 1s linear 100ms; } #d1:hover { background: red; width: 200px; border-radius: 20px; transform: rotate(45deg); box-shadow: 5px 5px 5px #999999; } </style> <div style="height: 200px"></div> <div id="d1"></div>
结束!!!!
能看出这篇博客我有点er 小糊弄吗?尴尬!