主页 / 问题 / 1592525
Accepted
Awake
Asked:2024-09-01 09:40:35 +0000 UTC2024-09-01 09:40:35 +0000 UTC

动画中背景消失

  • 772

大家好！我正在尝试使用 CSS 制作波浪效果。但问题出现了。背景图像就消失了，如果你可以这样称呼它的话。我注意到当图片达到其尺寸（宽度）的末尾时它就会消失。我按照视频做了，对那家伙来说一切正常，但对我来说这是浪费......如何解决这个问题？

body {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

section {
  width: 100%;
  height: 100vh;
  /*background: linear-gradient(120deg, white 50%, black 50%);*/
  /*background: white;*/
  overflow: hidden;
}

.wave {
  width: 100%;
  height: 100px;
  background-image: url(https://picsum.photos/2000/100);
  position: absolute;
  bottom: 0;
  left: 0;
  /*left: 185px;*/
  /*top: 90px;*/
  /*rotate: -60deg;*/
  background-size: 2000px 100px;
}

.wave1 {
  animation: anim 30s ease-in-out infinite;
}

.wave2 {
  animation: anim 25s ease-in-out infinite;
  opacity: .1;
}

.wave3 {
  animation: anim2 20s ease-in-out infinite;
  opacity: .5;
}

.wave4 {
  animation: anim2 35s ease-in-out infinite;
  opacity: .8;
}

@keyframes anim {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 2000px;
  }
}

@keyframes anim2 {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: -2000px;
  }
}
<div>
  <section>
    <div class="wave wave1"></div>
    <div class="wave wave2"></div>
    <div class="wave wave3"></div>
    <div class="wave wave4"></div>
  </section>
</div>

css

1 个回答

  1. Best Answer

    最好使用 SVG 制作这种简单的图像，以免拖拽光栅图像。

    body {
  margin: 0;
  padding: 0;
}

section {
  position: relative;
  height: 100vh; width: 100%;
  overflow: hidden;
  background: radial-gradient(circle closest-side at 70% 30%, #dda 50%, #112 60%);
}

.wave {
  position: absolute;
  bottom: 0; left: 0;
  height: 10vmax; width: 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 970 90' preserveAspectRatio='none'%3E%3Cpath d='M0 90c65 0 106-63 155-62s69 45 114 44S345-2 422 0s102 69 151 68 75-45 111-45 69 51 100 51 53-30 79-29 52 45 107 45H0Z' fill='%23aee'/%3E%3C/svg%3E");
  background-position: 0 100%;
  background-repeat: repeat-x;
  opacity: .2;
}
.wave1 {
  background-size: 100vmax 100%;
  animation: anim 35s ease-in-out infinite;
}
.wave2 {
  background-size: 100vmax 95%;
  animation: anim2 30s ease-in-out infinite;
}
.wave3 {
  background-size: 100vmax 85%;
  animation: anim 25s ease-in-out infinite;
}
.wave4 {
  background-size: 100vmax 70%;
  animation: anim2 20s ease-in-out infinite;
}

@keyframes anim {
  0%, 100% { background-position-x: 0; }
  50% { background-position-x: 100vmax; }
}
@keyframes anim2 {
  0%, 100% { background-position-x: 100vmax; }
  50% { background-position-x: 0; }
}
    <section>
  <div class="wave wave1"></div>
  <div class="wave wave2"></div>
  <div class="wave wave3"></div>
  <div class="wave wave4"></div>
</section>

    • 1

相关问题