css3 transition 过渡动画

最新推荐文章于 2025-06-18 16:58:08 发布

weixin_34082854

最新推荐文章于 2025-06-18 16:58:08 发布

阅读量71

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/u/583531/blog/309898

本文介绍了如何使用CSS实现元素宽度、高度的变化过渡效果，并通过实际代码展示了不同属性的应用。

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

2019独角兽企业重金招聘Python工程师标准>>>

<style>
/*改变宽度*/
.box{
 width:100px; height:100px; background:#066;
 transition: width 1s ease 0;
                    /*ease 逐渐变快*/
 -webkit-transition:width 1s ease 0;
 }
.box:hover{ width:500px;} 
/*改变高度*/
.box2{
 margin-top:20px;width:100px; height:100px; background:#FC0;
 transition: height 1s ease 0;
                    
 -webkit-transition:height 1s ease 0;
 }
.box2:hover{ height:300px;} 

/*改变高度和宽度*/
.box3{
 margin-top:20px;width:100px; height:100px; background:#FC0;
 transition: width 1s,height 1s, ease 0;               
 -webkit-transition: width 1s, height 1s, ease 0;
 }
.box3:hover{ width:300px; height:300px;} 
</style>

<div class="box">改变宽度</div>
<div class="box2">改变高度</div>
<div class="box3">改变宽度和高度</div>

转载于:https://my.oschina.net/u/583531/blog/309898