渐变动画上的 svg 蒙版

Question

您好，我尝试了所有方法，但没有发现错误。

我的背景上有一个 css 渐变动画运行，我想在它上面放一个遮罩。掩码由屏幕中央的一个圆圈组成。我希望背景中的动画运行仅在圆圈内可见。

到目前为止，这是我的代码：

@charset "utf-8";

body {
margin: 0;
background: #ffffff;
overflow: hidden;
}

.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}

.mask1 {
mask-image: url(assets/images/mask.svg);
mask-repeat: no-repeat;    
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>MAE</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body>

    <div class="mask1">
      <div class="background"></div>
  </div>

</body>
</html>

动画运行很好，但我没有看到遮罩。

感谢您的帮助。

Answer 1

是这样的吗？

@charset "utf-8";

body {
margin: 0;
background: #ffffff;
overflow: hidden;
}

.background {
background: linear-gradient(-45deg, #f2e167, #c0a1d3, #dce0a8);
background-size: 400% 400%;
animation: gradient 7s ease infinite;
height: 100vh;
width: 100vw;
z-index:-2;
}

.mask1 {
-webkit-mask-image: radial-gradient(circle, black 50%, rgb(0 0 0 / 0%) 50%);  
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

 <div class="mask1">
      <div class="background"></div>
  </div>

渐变动画上的 svg 蒙版

svg mask on a gradient animation

html

css

svg