CSS动画：无限循环更改图像

Question

我正在尝试使动画类似于页面右上角的https://cardsagainsthumanity.com/ 。 尽管很难做到这一点（如果您确切知道如何做到这一点，请让我知道），但是我决定对此做一个简化的版本。
我使用以下代码在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>

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 个解决方案

解决方案1
0 2017-10-02 16:47:21

CSS动画：无限循环更改图像

问题描述

1 个解决方案

解决方案1 0 2017-10-02 16:47:21

解决方案1
0 2017-10-02 16:47:21