南宁小程序开发,挑战百日学习计划第46天(css3-transition 过渡)

zkelm.com

于 2020-08-29 01:35:21 发布

阅读量403

点赞数 1

分类专栏：南宁小程序开发小程序定制南宁小程序文章标签：南宁小程序开发广西小程序开发南宁软件开发

本文链接：https://blog.csdn.net/zkelm/article/details/107970723

版权

南宁小程序开发同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

小程序定制

15 篇文章 1 订阅

订阅专栏

南宁小程序

14 篇文章 0 订阅

订阅专栏

南宁小程序开发：www.zkelm.com

transition：一种过渡效果，从一种形态过渡到另外一种形态的效果，并不是所有的都支持，只是支持一些 background border border-radius

transition-duration:5s 表示过渡的持续时间。过渡则是一种效果到另外一种效果的连续时间，

<style>
#mydiv{
 width:100px;height:100px;background-color:blue;
 transition:width,height,background-color,border 5s,5s,5s,5s;
}
#mydiv:hover{
width:200px;
height:200px;
background-color:#f55;
border-radius:50%;
}
</style>
<body>
<div id="mydiv"></div>
</body>