使用CSS掩码动画显示图像
要使用CSS掩码动画显示图像，你可以使用-webkit-mask属性和@keyframes规则。以下是一个简单的示例：
HTML代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Masked Image Animation</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="Your Image">
</div>
</body>
</html>
CSS代码（styles.css）：
.image-container {
position: relative;
width: 300px;
height: 300px;
overflow: hidden;
}
.image-container img {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
-webkit-mask-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0));
-webkit-mask-size: 200% 100%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: 0% 0%;
animation: mask-animation 2s infinite;
}
@keyframes mask-animation {
0% {
-webkit-mask-position: 0% 0%;
}
100% {
-webkit-mask-position: -100% 0%;
}
}
在这个示例中，我们首先创建了一个名为.image-container的容器，将图像放入其中。然后，我们使用-webkit-mask属性为图像创建一个从左到右的渐变遮罩。接下来，我们使用@keyframes规则创建了一个名为mask-animation的动画，使遮罩从左侧移动到右侧。最后，我们将这个动画应用到图像上，使其在2秒内无限循环播放。
使用CSS掩码动画显示图像