Не уверен, как анимировать мой генератор случайных цитат - PullRequest
Новая
       5

Не уверен, как анимировать мой генератор случайных цитат

0 голосов
/ 26 апреля 2020

Я пытаюсь оживить генератор случайных цитат. Мне бы хотелось, чтобы анимация выглядела как другая карта, в этом же стиле она переворачивается поверх этой, как колода карт. Я не очень разбираюсь в анимации и обладаю минимальными знаниями в области кодирования, поэтому я построил это с помощью учебника, а затем с некоторыми изменениями, чтобы заставить его работать именно так, как я хотел. Ниже мой код. Кто-нибудь знает, как я мог бы добавить к этому, чтобы завершить эту функцию? Это последнее, мне нужно, чтобы карта функционировала именно так, как я хочу. 

    <!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];
}

1 Ответ

0 голосов
/ 26 апреля 2020

Я думаю, что хорошее место для начала анимации для HTML - это CSS анимации . Если вам нужно что-то более конкретное c, пожалуйста, не стесняйтесь спрашивать, но лично это моя go техника для анимации. Хорошим местом для перезапуска анимации, вероятно, будет эта статья, опубликованная несколько лет назад.

...