HTMLCSS 创意工坊：卡片网格的鼠标魔法秀
这个HTML页面展示了一个包含SVG图标和文本的卡片网格。鼠标移入旋转放大的效果
演示效果
HTML&CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端Hardy</title>
<style>
body {
background: #212121;
}
.box {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
.card {
width: 190px;
height: 254px;
color: white;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 5px;
overflow: visible;
}
.card .item {
border-radius: 10px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.item:hover {
transform: scale(1.95);
transition: all 1s ease-in-out;
rotate: 360deg;
}
.item svg {
width: 40px;
height: 40px;
margin-bottom: 7px;
}
.item--1 {
background: #c7c7ff;
}
.item--2 {
background: #ffd8be;
}
.item--3 {
background: #a9ecbf;
}
.item--4 {
background: #f3bbe1;
}
.quantity {
font-size: 25px;
font-weight: 600;
}
.text {
font-size: 12px;
font-family: inherit;
font-weight: 600;
}
.text--1 {
color: rgba(149, 149, 255, 1);
}
.text--2 {
color: rgba(252, 161, 71, 1);
}
.text--3 {
color: rgba(66, 193, 110, 1);
}
.text--4 {
color: rgba(220, 91, 183, 1);
}
</style>
</head>
<body>
<div class="box">
<div class="card">
<div class="item item--1">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M17 15.245v6.872a.5.5 0 0 1-.757.429L12 20l-4.243 2.546a.5.5 0 0 1-.757-.43v-6.87a8 8 0 1 1 10 0zm-8 1.173v3.05l3-1.8 3 1.8v-3.05A7.978 7.978 0 0 1 12 17a7.978 7.978 0 0 1-3-.582zM12 15a6 6 0 1 0 0-12 6 6 0 0 0 0 12z"
fill="rgba(149,149,255,1)"></path>
</svg>
<span class="quantity"> 90+ </span>
<span class="text text--1"> Icons </span>
</div>
<div class="item item--2">
<svg height="24" width="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0L24 0 24 24 0 24z" fill="none"></path>
<path fill="rgba(252,161,71,1)"
d="M16 16c1.657 0 3 1.343 3 3s-1.343 3-3 3-3-1.343-3-3 1.343-3 3-3zM6 12c2.21 0 4 1.79 4 4s-1.79 4-4 4-4-1.79-4-4 1.79-4 4-4zm10 6c-.552 0-1 .448-1 1s.448 1 1 1 1-.448 1-1-.448-1-1-1zM6 14c-1.105 0-2 .895-2 2s.895 2 2 2 2-.895 2-2-.895-2-2-2zm8.5-12C17.538 2 20 4.462 20 7.5S17.538 13 14.5 13 9 10.538 9 7.5 11.462 2 14.5 2zm0 2C12.567 4 11 5.567 11 7.5s1.567 3.5 3.5 3.5S18 9.433 18 7.5 16.433 4 14.5 4z">
</path>
</svg> <span class="quantity"> 70+ </span>
<span class="text text--2"> Illustrations </span>
</div>
<div class="item item--3">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M20.083 15.2l1.202.721a.5.5 0 0 1 0 .858l-8.77 5.262a1 1 0 0 1-1.03 0l-8.77-5.262a.5.5 0 0 1 0-.858l1.202-.721L12 20.05l8.083-4.85zm0-4.7l1.202.721a.5.5 0 0 1 0 .858L12 17.65l-9.285-5.571a.5.5 0 0 1 0-.858l1.202-.721L12 15.35l8.083-4.85zm-7.569-9.191l8.771 5.262a.5.5 0 0 1 0 .858L12 13 2.715 7.429a.5.5 0 0 1 0-.858l8.77-5.262a1 1 0 0 1 1.03 0zM12 3.332L5.887 7 12 10.668 18.113 7 12 3.332z"
fill="rgba(66,193,110,1)"></path>
</svg>
<span class="quantity"> 150+ </span>
<span class="text text--3"> Components </span>
</div>
<div class="item item--4">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
<path fill="none" d="M0 0h24v24H0z"></path>
<path
d="M12 20h8v2h-8C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10a9.956 9.956 0 0 1-2 6h-2.708A8 8 0 1 0 12 20zm0-10a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm8 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-4 4a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"
fill="rgba(220,91,183,1)"></path>
</svg>
<span class="quantity"> 30+ </span>
<span class="text text--4"> Animations </span>
</div>
</div>
</div>
</body>
</html>
- .box：使用Flexbox布局，垂直和水平居中其子元素，高度设置为视口高度的100%。
- .card：定义卡片的尺寸和网格布局，两列两行，间隔为5px。
- .card .item：定义卡片项的样式，包括圆角、尺寸和Flexbox布局。
- .item:hover：定义鼠标悬停在卡片项上时的样式，包括缩放、旋转和过渡效果。
- .item svg：设置SVG图标的尺寸和外边距。
- .quantity和.text：设置数量和文本的字体大小和粗细。
- .text–1到.text–4：为不同卡片项的文本设置不同的颜色。