Question

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

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

现在，我尝试在论坛上阅读不同的答案后解决CSS中的第一个问题，但它没有奏效。我不知道我们是否可以通过Javascript或jquery解决它，因为我对它们并不熟悉。
如果你能帮助我解决至少第一个问题，那将是一个很大的帮助。

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

Answer 1

如果我这样做，我会直接使用Javascript。

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

例如，你的数组可能是

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

然后使用javascript你可以使用数组值来改变div.whitecard p值....循环结束。

老实说，没有时间写出一个例子，这个的主旨就是使用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>

Css动画：在无限循环中更改图像

1 个答案: