本教程将手把手带你实现一个具有动态焦点效果的卡片镂空动画。我们将结合 CSS动画 与 SVG 的 <mask> 遮罩技术，创建一个视觉吸引力强的展示效果，并重点讲解其实现原理。
🎯 效果展示
📚 核心原理：SVG Mask 遮罩技术
虽然使用纯 CSS 的 clip-path 也能实现类似裁剪，但代码可能较为繁琐，且在某些场景下的兼容性需要注意。本教程采用 SVG <mask>（遮罩） 方案，它能更直观、灵活地控制显示与隐藏区域。
- 遮罩颜色规则：在 SVG 遮罩中，颜色代表的不是视觉色彩，而是透明度。简单记作：白色（#fff）代表不透明（显示），黑色（#000）代表完全透明（隐藏），灰色则代表半透明。
- 定义与使用：
<mask> 属于 SVG 的私有资源，需要在 <defs> 标签内定义。在需要使用遮罩的 SVG 图形元素上，通过 mask=”url(#maskId)” 属性引用它。
下面的代码片段展示了一个基本的遮罩示例：一个全白的矩形上有一个黑色的圆形，应用遮罩后，将得到一个带有圆形镂空的矩形。
<svg>
<defs>
<mask id="holeMask">
<!-- 白色底，表示完全显示 -->
<rect width="100%" height="100%" fill="#fff" />
<!-- 黑色圆形，表示在该区域挖空 -->
<circle cx="50%" cy="50%" r="60" fill="#000" />
</mask>
</defs>
<!-- 应用遮罩，产生镂空效果 -->
<rect width="100%" height="100%" mask="url(#holeMask)" />
</svg>
💻 完整代码实现
接下来，我们将上述 SVG 遮罩技术融入一个完整的卡片组件中，并添加发光效果以增强视觉焦点。
- HTML 结构：创建一个卡片容器，包含背景图片、用于镂空的 SVG 层以及一个发光效果层。
- CSS 样式：设置卡片基础样式、定位以及发光效果的 CSS动画。为了确保动画流畅，在现代前端开发中，我们通常会注意使用
transform 和 opacity 等属性。
- SVG 遮罩：在 SVG 层中定义并应用镂空遮罩。
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>SVG遮罩实现卡片动态焦点效果</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: sans-serif;
background: #222; /* 深色背景更能凸显效果 */
}
.card {
width: 360px;
height: 220px;
border-radius: 16px;
overflow: hidden;
position: relative;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
.card-bg {
width: 100%;
height: 100%;
object-fit: cover;
}
/* 镂空窗口的发光动画效果 */
.glow {
position: absolute;
top: 50%;
left: 50%;
width: 140px;
height: 140px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 25px 10px rgba(255, 255, 255, 0.25);
pointer-events: none;
/* 添加呼吸动画 */
animation: glowPulse 2s ease-in-out infinite alternate;
}
@keyframes glowPulse {
from {
box-shadow: 0 0 20px 5px rgba(255, 255, 255, 0.2);
}
to {
box-shadow: 0 0 30px 15px rgba(255, 255, 100, 0.4);
}
}
</style>
</head>
<body>
<div class="card">
<!-- 背景图 -->
<img
class="card-bg"
src="https://picsum.photos/id/1011/600/400"
alt="卡片背景"
/>
<!-- SVG 镂空层 -->
<svg
width="100%"
height="100%"
style="position: absolute; top: 0; left: 0"
>
<defs>
<mask id="holeMask">
<rect width="100%" height="100%" fill="#fff" />
<!-- 调整 r 值可以改变镂空圆的大小 -->
<circle cx="50%" cy="50%" r="60" fill="#000" />
</mask>
</defs>
<!-- 应用遮罩，并填充一层深色半透明层 -->
<rect
width="100%"
height="100%"
mask="url(#holeMask)"
fill="rgba(0,0,0,0.75)"
/>
</svg>
<!-- 镂空窗口发光效果 -->
<div class="glow"></div>
</div>
</body>
</html>
通过本实战，你掌握了如何利用 SVG 遮罩 与 CSS动画 结合，创造出具有视觉深度的交互效果。这种技术可以灵活应用于人物展示、产品聚焦等高光提示场景，是提升网页视觉表现力的有效手段。理解其原理后，你可以尝试修改遮罩形状（如使用多个圆形、多边形），或为遮罩位置、发光效果添加更复杂的交互动画，创造属于自己的独特设计。 | 
发表于 3 天前
|
查看: 7|
回复: 0
