<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transtition</title>
<style>
.zero{
height:100px;
width:100px;
background-color:white;
transition: background-color 0.5s ease-in 0s;
float:left;
margin-left:10px;
}
.zero:hover{
background-color:gray;
}
</style>
</head>
<body>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
<div class=‘zero‘></div>
</body>
</html>
这时比较简单的过度可以实现一些简单的类似动画的效果，实现过渡一定要具备四个要素：
1.指定过渡属性，如background、color等
2.指定过渡所需时间
3.指定过渡函数，即过渡的速度、方式等
4.指定过渡延迟时间，表示开始执行的时间
这样就可以实现过渡由于是符合元素可以直接这样写transition: <property> <duration> <timing-function> <delay>。
时间： 2024-10-07 19:12:09