我正在尝试使我的随机报价生成器具有动画效果。我希望动画看起来像另一张卡片，在同一张卡片上翻转相同的样式，类似于一副纸牌。我对动画不是很了解，并且对编码的知识也不多，所以我用一个教程来构建它，然后进行一些编辑以使其能够完全按照我的要求运行。下面是我的代码。有谁知道我可以添加到其中以完成该功能吗？这是最后一件事，我需要完全按照我的意愿拥有卡功能。
<!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];
}
我认为开始研究HTML动画的好地方是CSS animations。如果您需要更具体的内容，请随时提问，但是就我个人而言，这是我的动画技巧。重新启动动画的一个好地方可能是几年前的this文章。