javascript 如何使旋转的Div的大小总是足够长以适应每个Rratio？

rur96b6h 于 2023-03-11 发布在 Java

关注(0)|答案(2)|浏览(96)

我正在尝试在图片后面制作一种绿色波浪效果。我为图片制作了一个div，为wave元素制作了另一个div，如下所示。然后我使用css将其旋转45度，并使其从左上角移动到右下角。
现在，问题是因为我把wave div旋转了45度，实际宽度变短了，如果你明白我的意思的话。所以当wave靠近左下角时，你会发现它不够长，没有覆盖整个屏幕，当屏幕比例像手机一样垂直时，这个问题会变得更严重，因为宽度甚至更小。

body {
  margin: 0;
  height: 100%;
}

#background-image {
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.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%;
  }
}

<div id="background-neon"></div>
<div id="background-image"></div>

下面是JSFiddle中的代码示例
我想我将需要使用JavaScript或CSS中的一个简单公式使用calc()，但我还没有找到一个解决方案。

JavaScript

来源：https://stackoverflow.com/questions/75700809/how-to-make-the-size-of-a-rotated-div-always-long-enough-to-fit-in-every-rratio

2条答案

按热度按时间

2ekbmq321#

你可以通过使用clip-path来实现这个效果，你必须仔细地定义你的多边形和过渡点，但是这里有一个我放在一起的快速例子来说明它看起来会是什么样子。

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

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

.image {
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.png");
  filter: grayscale(100%) brightness(20%);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.wave {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-position: bottom left;
  background-color: rgb(0, 150, 0);
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  
  animation: move 4s linear infinite;
}

@keyframes move {
  0% {
    clip-path: polygon(10% 0, 17% 0, 0 24%, 0 15%);
  }

  49% {
    clip-path: polygon(93% 0, 100% 0, 0 100%, 0 93%);
  }

  50% {
    clip-path: polygon(100% 0, 100% 8%, 9% 100%, 0 100%);
  }

  100% {
    clip-path: polygon(100% 82%, 100% 90%, 94% 100%, 88% 100%);
  }
}

<p>
  Paragraph before 
</p>
<div class="container">
  <div class="image"></div>
  <div class="wave"></div>  
</div>
<p>
  Paragraph after
</p>

赞(0）回复(0）举报 2023-03-11

shyt4zoc2#

这是一个适用于大多数屏幕尺寸的解决方案。然而，它仍然需要在媒体查询的帮助下针对边缘情况进行细化。

body {
  margin: 0;
}

#effect {
  position: relative;
  background-image: url("https://www.transparenttextures.com/patterns/black-felt.png");
  height: 100vh;
  overflow: hidden;
}

#effect::before {
  position: absolute;
  content: "";
  width: calc(100vw + 100vh + 10%);
  top: 45%;
  height: 10%;
  z-index: -1;
  background-color: rgb(0, 150, 0);
  rotate: -45deg;
  animation: move 4s linear infinite;
}

@keyframes move {
  0% {
    left: -200%;
  }
  100% {
    left: 100%;
  }
}

<div id="effect"></div>

赞(0）回复(0）举报 2023-03-11

我来回答

javascript 如何使旋转的Div的大小总是足够长以适应每个Rratio？

2条答案

相关问题

热门标签

最新问答