CSS动画:在无限循环中更改图像

我正在尝试使动画类似于此https://cardsagainsthumanity.com/页面上的右上角。尽管很难做到这一点很难（如果您确切地知道如何做到这一点，请告诉我），但是我决定制作一个简化的版本。
我做了黑色＆amp;白卡沿CSS设计中的Zoomin效果以及以下代码（按下底部的运行代码片段以查看其外观）。

现在，有两个问题：
1.要用接下来的三张卡（第二组合＃它们不在代码＃中）替换这三张卡（第一个组合），以便在更大的无限循环中运行这些不同的组合。[高优先级]
2.一一显示卡片。首先，黑卡应该出现，然后是第一张白卡，第二张白卡等。目前，我们的所有卡一次同时出现在屏幕上。[低优先级]。

现在，我在阅读了论坛上的不同答案后尝试解决CSS中的第一个问题，但这无效。我不知道我们是否可以通过JavaScript或jQuery解决它，因为我对它们不太熟悉。
如果您可以帮助我解决第一个问题，那将是一个很好的帮助。

.blackcard {
  position: relative;
  float: right;
  margin-top: 54px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
  width: 160px;
  height: 230px;
  border-radius: 10px;
  padding: 15px;
  -webkit-box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: #FFFFFF;
  text-shadow: 0px 0px #000000;
  background-color: #000000;
}
.stage {
  background: #232323;
  border-radius: 6px;
  height: auto;
  position: relative;
  min-width: 100%;
  float: right;
  margin-right: 0px;
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }
  50% {
    opacity: 1;
  }
}
.whitecard {
  position: relative;
  float: right;
  margin: 54px 10px 10px 10px;
  width: 160px;
  height: 230px;
  border-radius: 10px;
  padding: 15px;
  background: #fff;
  -webkit-box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
  box-shadow: 15px 15px 0px rgba(0, 0, 0, 0.3);
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
  <link href="css/cards.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="stage">
    <div class="whitecard zoomIn">
      <p2>Sleeping.</p2>
    </div>
    <div class="whitecard zoomIn">
      <p>Coding.</p>
    </div>
    <div class="blackcard zoomIn">
      <p> What are you doing?</p>
    </div>
  </div>
</body>
</html>

如果我这样做，我会直接去javascript。

您可以使用具有许多不同值的阵列作为白卡，并在白卡上具有"随机更新"的值。

因此，例如您的数组可以是

var exampleArray = ['value1', 'value2', 'value3'];

然后使用JavaScript您可以使用数组值更改Div.WhiteCard P值....

老实说，没有时间写一个例子，其中的JIST就是使用JavaScript并将其视为您的朋友！

请参阅下面的评论的编辑...

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<div id="myGreetingSkills"></div>
<script>
(function($) {
  $(function() {
    var skills = ["text1","text2","text3","text4"],
      counter = skills.length - 1,
      previousSkill = $("#myGreetingSkills"),
      arraylength = skills.length - 1;
    function display_skills() {
      if (counter === arraylength) {
          counter = 0;
      }
      else {
          counter++;  
      }
      previousSkill.html(skills[counter]);
    }
    display_skills();
    setInterval(function() {
      display_skills();
    }, 2000);
  });
})(jQuery);
</script>
</body>
</html>

相关内容

最新更新

热门标签：