SVG蒙版文本特效 _svg width 100%-优快云博客

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG蒙版文本特效</title>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #222;
overflow: hidden;
font-family: Arial, sans-serif;
}

.container {
position: relative;
width: 100%;
height: 100%;
}

.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5vw;
font-weight: bold;
color: white;
text-align: center;
}

svg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.mask-rect {
animation: slide 4s ease-in-out infinite;
}

@keyframes slide {
0% {
x: -100%;
}
50% {
x: 100%;
}
100% {
x: -100%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="text">SVG蒙版文本特效</div>

<svg>
<defs>
<mask id="text-mask">
<rect width="100%" height="100%" fill="white" />
<rect class="mask-rect" y="0" width="100%" height="100%" fill="black" />
</mask>
</defs>

<rect width="100%" height="100%" mask="url(#text-mask)" fill="white" />
</svg>
</div>


</body>
</html>