所以我正在尝试在图像后面制作一种绿色波浪效果。 为此，我为图像制作了一个 div，为 wave 元素制作了另一个 div，如下面的 HTML 代码所示。 然后我使用 css 将它旋转 45 度并对其进行动画处理，使其从左上角移动到右下角。
现在，问题是因为我将 wave div 旋转了 45 度，如果你明白我的意思的话，实际宽度更短。 因此，当波浪靠近例如左下角时，您可以看到它不够长并且没有覆盖整个屏幕，当屏幕比例像手机一样垂直时，这个问题会变得更糟，因为宽度是均匀的更小。
我在互联网上搜索并询问了 chatGPT，但问题总是别的。
这是JSFiddle
中的代码示例HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Baksteen</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div id="background-neon"></div>
<div id="background-image"></div>
</body>
</html>
CSS代码：
body {
margin: 0;
height: 100%;
}
#background-image {
background-image: url("./Brick Wall Green Screen.png");
height: 100vh;
background-size: 50vh;
position:absolute;
z-index: 2;
filter: grayscale(100%) brightness(20%);
right: 0;
left: 0;
}
#background-neon {
width: 100%;
height: 10%;
overflow: hidden;
position: absolute;
z-index: 1;
transform: rotate(-45deg);
background-position: bottom left;
background-color: rgb(0, 150, 0);
animation: move 4s linear infinite;
}
@keyframes move {
0% {
top: -50%;
left: -50%;
}
100% {
top: 100%;
left: 25%;
}
}
我想我需要使用 java 或在 css 中使用 calc() 的简单公式，但我还没有找到解决方案。