CSS3 过渡效果
过渡效果的语法格式如下:
transition: 要过渡的属性 花费的时间 运动曲线 何时开始;
注意:
1、transition属性具体的属性值说明见下表:
2、transition作用的对象:哪个元素需要过渡效果就给哪个元素加过渡属性;
3、如果想要多个属性都变化,则可以利用逗号分隔,如:
transition: width .5s, height: .5s;
4、transition属性经常和:hover搭配使用
属性值 | 说明 |
---|---|
要过渡的属性 | 该属性值可以是某个想要做变化过渡效果的css属性(宽度高度、背景颜色、内外边距等); 也可以是all,表示所有的属性都做变化过渡效果 |
花费时间 | 单位是秒(必须写单位) |
运动曲线 | 取值包括:ease(速度逐渐慢下来,默认值);linear(匀速);ease-in(加速); ease-out(减速);ease-in-out(先加速后减速) |
何时开始 | 单位是秒(必须写单位),默认值是0s(可以省略) |
微信公众号也会定期更新,觉得文章写得还可以的,可以加个关注!点个赞!谢谢!