首页 > html+css >正文

css过渡效果（transition）

发布时间：2024-08-27 14:23 作者：一友画

这是一个css动画的效果

语法： transition:动画css属性过渡时间秒数速度类型延迟的秒数

取值：第一个值，写css属性名称，就是要发生改变的css属性；第二个值是时间单位s秒；第三个值是发生改变的曲线linear匀速，ease先慢后快再慢；第四个值可以定义动画在几秒后开始

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;background: #f00;transition:transform 1s linear;margin-left:30px;}
div:hover{transform:scale(1.3);}
</style>
<div></div>

案例

案例代码示例：

<style type="text/css">
div{width: 100px;height: 100px;margin-left: 30px;}
div img{transition:all 1s ease;}
div:hover img{transform:scale(1.3) rotate(360deg);}
</style>
<div></div>

案例2

以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！