CSS анимация для конкретного Div

ProgramBox

CSS анимация для конкретного Div

Post author:admin
Запись опубликована:14 марта, 2023
Post category:Вопросы по программированию

#html #css #animation #css-animations #keyframe

#HTML #css #Анимация #css-анимация #ключевой кадр

Вопрос:

Я сделал некоторую анимацию css с помощью статей через Интернет. Однако, когда я помещаю эту анимацию, она распространяется по всему телу. но мне это нужно только в контейнере-fluid div. как мне это содержать? Я попробовал overflow: hidden, но это не работает. код выглядит следующим образом. (я поместил для этого здесь определенный размер тела, чтобы вы это поняли. Когда я размещаю ее на своем веб-сайте, она повторяется повсюду.

 body {
  width: 1366px;
  height: 1366px;
}

.anim_Main {}

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

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

.bg3 {
  animation-duration: 7s;
}

.content {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  /* left: 50%; */
  /* padding: 10vmin; */
  position: relative;
  float: left;
  text-align: center;
  /* top: 50%; */
  /* transform: translate(-50%, -50%);*/
}

.contentNews {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  position: relative;
  float: left;
  text-align: center;
  width: 100%;
}

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

.widthMax {
  width: 100%;
}

 <div class="container-fluid">
  <div class="content">
    <div class="row">
      <div class="widthMax">
        <h2>Lorem Ipsum</h2>
      </div>

      <div class="col-sm-5">
        <div class="purifier">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
        </div>
        <h3 class="card-title" align="center">Lorem Ipsum..!</h3>
        <p class="drop-cap">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum. amp;rdquo;
      </div>

      <div class="col-sm-7">
        <a href="#" target="_blank"><img class="img-fluid" src=""></a>
        <br /><br />
        <a href="#" class="card-link" target="_blank">
          <h5 align="center">Lorem Ipsum</h5>
          <p align="center"><i class="fa fa-info-circle"></i> <i>Lorem Ipsum</i>
        </a>
      </div>

    </div>
  </div>

</div>

Ответ №1:

Установите .content контекст нестатически расположенных элементов и скройте переполнение:

 .content {
  position: relative; /* already exists */
  overflow: hidden;

Суть в том position .bg fixed , чтобы изменить его на absolute , чтобы он был в контексте .content .

 .bg {
  position: absolute;

 .container-fluid { 
  width: 50vw; /* just for the demo */
}

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

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

.bg3 {
  animation-duration: 7s;
}

.content {
  overflow: hidden;
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  /* left: 50%; */
  /* padding: 10vmin; */
  position: relative;
  float: left;
  text-align: center;
  /* top: 50%; */
  /* transform: translate(-50%, -50%);*/
}

.contentNews {
  background-color: rgba(255, 255, 255, .8);
  border-radius: .25em;
  box-shadow: 0 0 0.25em rgba(0, 0, 0, .25);
  box-sizing: border-box;
  position: relative;
  float: left;
  text-align: center;
  width: 100%;
}

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

.widthMax {
  width: 100%;
}

 <div class="container-fluid">
  <div class="content">
    <div class="row">
      <div class="widthMax">
        <h2>Lorem Ipsum</h2>
      </div>

      <div class="col-sm-5">
        <div class="purifier">
          <div class="bg"></div>
          <div class="bg bg2"></div>
          <div class="bg bg3"></div>
        </div>
        <h3 class="card-title" align="center">Lorem Ipsum..!</h3>
        <p class="drop-cap">
          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
          survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
          publishing software like Aldus PageMaker including versions of Lorem Ipsum. amp;rdquo;
      </div>

      <div class="col-sm-7">
        <a href="#" target="_blank"><img class="img-fluid" src=""></a>
        <br /><br />
        <a href="#" class="card-link" target="_blank">
          <h5 align="center">Lorem Ipsum</h5>
          <p align="center"><i class="fa fa-info-circle"></i> <i>Lorem Ipsum</i>
        </a>
      </div>

    </div>
  </div>

</div>

1. Мне нужно одно уточнение. если мне нужно применить то же самое к другому div, что я должен изменить?

2. Контейнер должен иметь position: relative и overflow: hidden . Анимация должна иметь position: absolute и не фиксирована.

3. Большое спасибо, чувак <3 Очень понравилось.