CSS Background Animation только в блоке - PullRequest
Новая
       5

CSS Background Animation только в блоке

0 голосов
/ 19 мая 2019

У меня есть следующий анимированный фон, в настоящее время отображаемый на весь экран, мне нужно, чтобы вы визуализировали только в блоке (<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>

Я всегда вижу на весь экран какое-то предложение, чтобы можно было увидеть анимацию только в блоке (div)

Ответы [ 2 ]

1 голос
/ 19 мая 2019

Добавьте следующий код: 

.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>
1 голос
/ 19 мая 2019

Изменить положение .bg на относительное.Добавьте «контейнер» div в качестве родителя.«Контейнер» должен иметь относительное положение.Нижний колонтитул будет иметь «абсолютную» позицию.Взгляните 

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

.footer{
position:relative;
bottom:0;
height:50px;
background-color: #f7f7f7;
width: 100%;
}
.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:absolute;
  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="container">
        <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>
</div>
...