CSS 背景动画仅在 block 中

Question

我有下面的动画背景，目前显示在整个屏幕上，我需要你只在一个 block 中可视化(<div class="c"> </ div>)

body {
  margin:0;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
}

.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

   

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

.c {margin:0 auto;}

        <div class="c">
            <div class="bg"></div>
            <div class="bg bg2"></div>
            <div class="bg bg3"></div>
            <div class="content">
              <h1>Only here animation</h1>
            </div>
        </div> <!-- /end animation -->
        <div class="footer">Here without animation</div>

我总是在整个屏幕上看到，一些建议只能在一个 block (div)中看到动画

Answer 1

添加以下CSS:

.c {  height: 80px; }
.bg { height: 80px; }

注意:根据您的口味更改尺寸。(高度)

示例:

body {
  margin:0;
}

.c {
    height: 80px;
}

.bg {
  animation:slide 3s ease-in-out infinite alternate;
  background-image: linear-gradient(-60deg, #6c3 50%, #09f 50%);
  bottom:0;
  left:-50%;
  opacity:.5;
  position:fixed;
  right:-50%;
  top:0;
  z-index:-1;
  height: 80px;
}


.bg2 {
  animation-direction:alternate-reverse;
  animation-duration:4s;
}

.bg3 {
  animation-duration:5s;
}

   

@keyframes slide {
  0% {
    transform:translateX(-25%);
  }
  100% {
    transform:translateX(25%);
  }
}

  <div class="c">
            <div class="bg"></div>
            <div class="bg bg2"></div>
            <div class="bg bg3"></div>
            <div class="content">
              <h1>Only here animation</h1>
            </div>
        </div> <!-- /end animation -->
        <div class="footer">Here without animation</div>