CSS过渡如何实现平滑的逆过渡
3 回答
月关宝盒
TA贡献1772条经验 获得超5个赞
CSS3当中 transition过渡效果主要包括四个属性值，分别用于检索或设置对象中的参与过渡的属性、对象过渡的时间、过渡的动画类型以及对象延迟过渡的时间。
在你的这段代码当中，可以把transition后面的“0.5s”改一下
改成： 0.5s 1s
湖上湖
TA贡献2003条经验 获得超2个赞
使用过渡属性 transition可以让页面的模块进行平滑过渡
例子：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <html> <head> <style> div { width: 100px; height: 100px; background: red; transition: width 2s; } div:hover { width: 300px; } </style> </head> <body> <div></div> </body> </html> |
上面这个例子可以看到长宽100的正方形平滑过渡2s
transition的具体属性值
transition-property 规定设置过渡效果的 CSS 属性的名称。
transition-duration 规定完成过渡效果需要多少秒或毫秒。
transition-timing-function 规定速度效果的速度曲线。
transition-delay 定义过渡效果何时开始。
- 3 回答
- 0 关注
- 628 浏览
添加回答
举报
0/150
提交
取消