代码
提交代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta 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: 0; margin: 0; }
/* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
ul {
/* 网格布局 */
display: grid;
/* 引入了chinese-layout这个库，所以可以用中文 */
grid: var(--六宫格);
/* 间距10px */
gap: 10px;
/* 给个宽高 */
width: 300px;
height: 200px;
/* 清除默认样式 */
list-style: none;
}
li {
/* 引入了chinese-gradient这个CSS库，所以可以用中文 */
background: var(--怦然心动);
/* 过渡属性，有了这个属性才会有过渡效果 */
transition: transform .2s;
}
li:hover {
/* 鼠标移入时进行放大 */
transform: scale(1.1);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
运行结果