猿问

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

CSS过渡如何实现平滑的逆过渡

CSS过渡如何实现平滑的逆过渡


白衣染霜花
浏览 629回答 3
3回答

月关宝盒

CSS3当中 transition过渡效果主要包括四个属性值，分别用于检索或设置对象中的参与过渡的属性、对象过渡的时间、过渡的动画类型以及对象延迟过渡的时间。在你的这段代码当中，可以把transition后面的“0.5s”改一下改成： 0.5s 1s
0

湖上湖

使用过渡属性 transition可以让页面的模块进行平滑过渡例子：123456789101112131415161718<html>&nbsp;&nbsp;&nbsp;&nbsp;<head>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<style>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;red;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;transition:&nbsp;width&nbsp;2s;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;div:hover&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;300px;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</style>&nbsp;&nbsp;&nbsp;&nbsp;</head>&nbsp;&nbsp;&nbsp;&nbsp;<body>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<div></div>&nbsp;&nbsp;&nbsp;&nbsp;</body></html>上面这个例子可以看到长宽100的正方形平滑过渡2stransition的具体属性值transition-property 规定设置过渡效果的 CSS 属性的名称。transition-duration 规定完成过渡效果需要多少秒或毫秒。transition-timing-function 规定速度效果的速度曲线。transition-delay 定义过渡效果何时开始。&nbsp;
0
打开App，查看更多内容
随时随地看视频慕课网APP

相关分类

CSS3