适合过渡动画的场景
最典型的例子就是当鼠标移入时进行一些动画：
<!DOCTYPE html>
<html lang="en">
<head>
< charset="UTF-8">
<title>Transition</title>
<!-- 渐变色的CSS库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-gradient">
<!-- 布局的CSS库 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/chinese-layout">
<style>
/* 清除认样式 */
* { padding: ; margin: ; }
/* 这段是为了居中，不是重点，看不懂的话可以无视 */
body {
height: vh;
display: flex;
align-items: center;
justify-content: center;
}
ul {
/* 网格布局 */
display: grid;
/* 引入了chinese-layout这个库，所以可以用 */
grid: var(--六宫格);
/* 间距10px */
gap: px;
/* 给个宽高 */
width: px;
height: px;
/* 清除认样式 */
list-style: none;
}
li {
/* 引入了chinese-gradient这个CSS库，所以可以用 */
background: var(--怦然心动);
/* 过渡，有了这个才会有过渡 */
transition: transform s;
}
li:hover {
/* 鼠标移入时进行放大 */
transform: scale();
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行结果：
不过眼尖同学可以发现CSS里面居然可以写，这是怎么回事呢？@H__477@ 原来是因为我们引入了CSS库来美化了我们的样式：
其实你在大部分网站看到的一些交互动画都是过渡动画，这么一看感觉好像帧动画没什么优势啊。
其实不然，接下来我们将用Css Sprite来让大家见识一下帧动画的厉害之处。
602392714
清零编程群