CSS3动画--过渡效果
transition 设置四个过渡属性
transition-property 过渡的名称
transition-duration 过度效果花费的时间
transition-timing function 过渡效果的时间曲线
transition-delay 过渡效果开始时间
1、案例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3动画--过渡效果</title>
<style>
*{margin: 0;padding: 0}
section{width: 200px;height: 200px;background-color: coral;transition:width 2s,height 2s, transform 2s;
margin: 50px auto;}
section:hover{width: 400px;height: 400px;transform:rotate(360deg);}
</style>
</head>
<body>
<section></section>
</body>
</html>
2、案例效果
时间： 2024-10-28 14:35:42