主页 / 问题 / 890835
Accepted
stiv
Asked:2020-10-09 16:14:11 +0000 UTC2020-10-09 16:14:11 +0000 UTC

顺序块动画

  • 772

在此处输入图像描述

.wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 80px;
  background: #00d6d6;
}

.card-first{
  top: -30px;
  left: 20px;
  background: red;
}
<div class="wrap">
  <div class="card">
    Текст отзыва1
  </div>
  <div class="card">
    Текст отзыва2
  </div>
  <div class="card card-first">
    Текст отзыва3
  </div>
  <div class="card">
    Текст отзыва4
  </div>
</div>

javascript

3 个回答

  1. Best Answer

    如果块的数量是可变的，那么您需要尝试延迟和动画持续时间。 

    window.onload = function() {
  let aCards = document.querySelector('.wrap').children;
  let i = aCards.length;
  while (i--) {
    aCards[i].style.background = 'hsl(' + (i * 60) + ',100%,50%)';
    aCards[i].style.animationDelay = i + 's';
    aCards[i].classList.add('rotator');
  }
}
    .wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: -30px;
  left: 20px;
  width: 300px;
  height: 80px;
  border: 2px solid #444;
  opacity: 0.0;
}

.rotator {
  animation: 4s ease-in infinite front;
}

@keyframes front {
  0%   { top: -30px; left: 20px; opacity: 0.0; }
  15%  { top: -30px; left: 20px; opacity: 0.99; z-index: 0; }
  55%  { top: 0px;   left: 0px;                 z-index: 2; }
  70%  { top: 0px;               opacity: 0.99; z-index: 3; }
  99%  { top: 90px;  left: 0px;  opacity: 0.0;  z-index: 4; }
  100% { top: -30px; left: 20px;                z-index: 0; }
}
    <div class="wrap">
  <div class="card">Текст отзыва1</div>
  <div class="card">Текст отзыва2</div>
  <div class="card">Текст отзыва3</div>
  <div class="card">Текст отзыва4</div>
</div>

    • 3 

  2. setInterval(function(){
  var cardFirst = $('.wrap').find('.card-first'),
      cardFirstIndex = cardFirst.index(),
      nextCard = $('.wrap').find('.card.next');

  cardFirst.removeClass('card-first');
  $(`.card:eq(${nextCard.index()})`).addClass('card-first');

  nextCard.removeClass('next');
  $(`.card:eq(${nextCard.index() - 1})`).addClass('next');
  }, 1000);
    .wrap {
  position: relative;
  margin-top: 50px;
  padding: 20%;
}

.card {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 80px;
  background: #00d6d6;
  transition: all 1s;
  z-index: 11;
}

.card-first{
  top: 30px;
  left: 20px;
  background: red;
  z-index: 13;
}
.next{
  z-index:12;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <div class="card">
    Текст отзыва1
  </div>
  <div class="card">
    Текст отзыва2
  </div>
  <div class="card next">
    Текст отзыва3
  </div>
  <div class="card card-first">
    Текст отзыва4
  </div>
</div>

    该代码不是最好的，但它可以工作。动画的地方，1s内进行过渡，间隔在JS中设置

    • 0

  3. 我建议你使用Animate.css和wow.js

    使用示例：

    <link rel="stylesheet" href="css/aminate.min.css" />

<div class="custom-block wow fadeInUp" data-wow-offset="300"></div>

<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>

    最终，自定义块将顺利滑出屏幕的底部边缘。

    • 0

相关问题