鼠标放在div上延迟改变宽度效果

2024-10-12 06:00:54

1、新建一个html文件,命名为test.html,用于实现鼠标放在div上延迟改变宽度效果。

鼠标放在div上延迟改变宽度效果

3、再使用CSS中的hover属性,设置鼠标放上去时,改变其原始样式,设置宽度为300px。

鼠标放在div上延迟改变宽度效果

5、使用CSS中的transition-duration设置要改变div宽度的过渡时间,这里设置为1秒。

鼠标放在div上延迟改变宽度效果

7、最后,使用CSS中的transition-delay设置改变div宽度的延迟时间,这里设置为2秒后再改变div的宽度。

鼠标放在div上延迟改变宽度效果鼠标放在div上延迟改变宽度效果
猜你喜欢