纯css如何改变盒子的宽高导致其有伸缩的动画效果?

最新推荐文章于 2022-12-29 21:53:24 发布

久伴云天

最新推荐文章于 2022-12-29 21:53:24 发布

阅读量1.9k

点赞数

文章标签： css3 animation

本文链接：https://blog.youkuaiyun.com/m0_58399188/article/details/117385136

版权

本文介绍了如何通过CSS实现盒子的宽度和高度平滑过渡的动画效果。对于设置了宽高的盒子，可以直接修改width和height并配合transition或animation。然而，若父盒子依赖子元素撑开高度，直接改变height将无法产生动画效果。此时，可以利用transform的scale属性，创建出父元素高度逐渐变化的动画。同时，文章强调了CSS动画的基本原则，即动画效果应直接应用在目标元素上，并给出了:hover选择器的用法示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.对于一般的盒子我们都是直接设置宽和高的,对于这种有宽和高的盒子直接修改它的width和height值,再使用transition或者animation设置它的duration,就可以看到宽和高的伸缩效果
2.有的盒子,我们为了布局和内容是不会给它height的,这种情况下,它只有靠子盒子的大小来撑开,这种情况下想要父盒子的height产生伸缩效果,使用height重新赋值就不行了,它会直接变成重新赋值后的大小,秒变,就算你transition和animation都设置了duration也还是会秒变,那这个时候如何使父元素的height产生慢慢伸缩的动画效果呢?
这个时候就不能在transition/animation里直接改变height了,而是使用transform里面的scale属性即可.
注意:使用scale放缩的盒子还占有网页原来的位置,下方的盒子无法自动补上来
番外记忆点:
1.谁做动画给谁加,过渡写到本身上
2.btn:hover{}作用:当鼠标悬浮在btn上时,btn产生什么操作
btn:hover+.hello{}作用:当鼠标悬浮在btn上时,hello会产生什么操作.