代碼
提交代碼
<!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>
/* 清除默認(rèn)樣式 */
* { padding: 0; margin: 0; }
/* 這段代碼是為了居中顯示，不是重點，看不懂的話可以無視 */
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
ul {
/* 網(wǎng)格布局 */
display: grid;
/* 引入了chinese-layout這個庫，所以可以用中文 */
grid: var(--六宮格);
/* 間距10px */
gap: 10px;
/* 給個寬高 */
width: 300px;
height: 200px;
/* 清除默認(rèn)樣式 */
list-style: none;
}
li {
/* 引入了chinese-gradient這個CSS庫，所以可以用中文 */
background: var(--怦然心動);
/* 過渡屬性，有了這個屬性才會有過渡效果 */
transition: transform .2s;
}
li:hover {
/* 鼠標(biāo)移入時進行放大 */
transform: scale(1.1);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
運行結(jié)果