Попытка анимировать lo go в потоке Twitch - PullRequest
Новая
       29

Попытка анимировать lo go в потоке Twitch

0 голосов
/ 23 февраля 2020

Я пытаюсь заставить мой lo go появляться в моем потоке Twitch в течение ~ 10 секунд, прежде чем исчезнуть, а затем снова появиться ~ 5 минут спустя. Я не могу понять, как заставить мой lo go отображаться при открытии файла в виде вкладки в моем браузере. Я скопировал код из другого стримера, но мне хотелось анимировать что-то отличное от того, что было у него в потоке.

Вот код, который я использую для моего lo go

<html>
<head>
    <title>Animated Logo</title>
    <meta http-equiv="refresh" content="300">
    <style>
            }
        #reminderContainer {
            width: 0px;
            height: 0px;
            background: #ffffff00;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            color: white;
            -moz-box-shadow: 0px 0px 20px #0f3369;
            -moz-animation: animateReminder 10s 0s 1;
            }
        #reminderContent {
            width: 256px;
            height: 256px;
            background: #ffffff00;
            position: relative;
            overflow: hidden;
            color: white;
            }
        #CKBulldogHead256x256 {
            width: 90px;
            height: 90px;
            float: center;
            }    
        @-moz-keyframes animateReminder {
            0%, 100% {
                width: 0px;
                height: 24px;
                }
            20%, 80% {
                width: 400px;
                height: 24px;
                }
            30%, 70% {
                width: 400px;
                height: 120px;
                }
            }
    </style>        
</head>
<body>
            <div id="reminderContent">
            <image id="CKBulldogHead2 256x256" src="imgur.com/gallery/c9vZXfF">
            <div="reminderContentText">
                </span>
            </div>
        </div>
    </div>
</body>

Вот исходный код, из которого я скопировал и сделал заново, чтобы сделать его моим свое. 

<html>
<head>
    <title>My Stream Animated Panels</title>
    <meta http-equiv="refresh" content="60">
    <style>
        @font-face {
            font-family: 'Dolce Vita';
            src: url('fonts/Dolce Vita.ttf');
            }
        #reminderContainer {
            width: 0px;
            height: 0px;
            background: #2e5794;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            color: white;
            font-family: 'Dolce Vita';
            -webkit-box-shadow: 0px 0px 20px #0f3369;
            -webkit-animation: animateReminder 10s 0s 1;
            }
        #reminderHeader {
            width: 400px;
            height: 26px;
            background: #0f3369;
            position: relative;
            overflow: hidden;
            text-align: center;
            font-size: 24px;
            }
        #reminderContent {
            width: 400px;
            height: 94px;
            background: #2e5794;
            position: relative;
            overflow: hidden;
            color: white;
            }
        #twitchLogo {
            width: 90px;
            height: 90px;
            float: left;
            }

        @-webkit-keyframes animateReminder {
            0%, 100% {
                width: 0px;
                height: 24px;
                }
            20%, 80% {
                width: 400px;
                height: 24px;
                }
            30%, 70% {
                width: 400px;
                height: 120px;
                }
            }
    </style>        
</head>
<body>
    <div id="reminderContainer">
        <div id="reminderHeader">
            <span>Reminder:</span>
        </div>
        <div id="reminderContent">
            <image id="twitchLogo" src="images\twitchLogo.png">
            <div="reminderContentText">
                <span>
                    Like what you see in the stream?<br>
                    Hit that follow button below!
                </span>
            </div>
        </div>
    </div>
</body>

Его код содержит текст, который мне не нужен, так как я просто хочу, чтобы lo go был анимирован. Возможно, я удалил некоторые важные вещи. Я не кодер, ни форма, ни форма, просто пытающаяся заставить что-то работать для моего потока.

Спасибо,

CzarKilo

...