Question

我正在尝试使我的随机报价生成器动画。我希望动画看起来像另一张卡片，在同一张卡片上翻转相同的样式，类似于一副纸牌。我对动画不是很了解，并且对编码的知识也不多，所以我用一个教程来构建它，然后进行一些编辑以使其能够完全按照我的要求运行。下面是我的代码。有谁知道我可以添加到其中以完成该功能吗？这是最后一件事，我需要完全按照我的意愿拥有卡功能。

    <!DOCTYPE html>
<html>
<head>
    <title>Quote Gen</title>
</head>
<style type="text/css">
    .cardbutton{
    width: 540px;
    height: 300px;
    border-width: 12px;
    border-style: solid;
    border-color: #02fad1;
    background-color: #fff;
    border-radius: 25px;
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

</style>
<body>
    <h1>Simple Quote Generator</h1>

    <!--
        <button onclick="newQuote()" id="quoteDisplay" class="button">Drinking Game</button>
    -->
<div class="wrapper">
<button onclick="newQuote()" class="cardbutton" style="padding-right:15px; padding-left:15px;">
            <h1 style="font-family:poppins; position: absolute; top:100px; left:50%; margin-left:-83px;">MOST LIKELY TO</h1>
            <p id="quoteDisplay" style="position: relative; top:20px;">Whoever is most likely to, drinks!</p>
        </button>
</div>
    <script src="javascript.js"></script>
</body>
</html>

这是我的Javascript。


var quotes = [
'Who do you want to make out with the most?',
'If you had to flash just one person in this room, who would it be?',
'If you haven\'t had your first kiss yet, who in this room do you want to have your first kiss with?',
'Of the people in this room, who would you go out with?',
'Describe the most attractive thing about each person in this room.',
'Who here do you think is the best flirt?',
'Who has the best smile?',
'Who has the cutest nose?',
'How about prettiest eyes?',
'Who\'s the funniest in this room?'
]

function newQuote() {
    var randomNumber = Math.floor(Math.random() * (quotes.length));
    document.getElementById('quoteDisplay').innerHTML = quotes[randomNumber];
}

Answer 1

我认为CSS animations是开始研究HTML动画的一个好地方。如果您需要更具体的内容，请随时提问，但就我个人而言，这是我的动画技巧。几年前的this文章可能是一个重新启动动画的好地方。

不确定如何为我的随机报价生成器制作动画

1 个答案: