-
Notifications
You must be signed in to change notification settings - Fork 7
/
devirave.html
101 lines (101 loc) · 2.71 KB
/
devirave.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE HTML>
<html>
<head>
<title>Rave with DeviCat</title>
<link rel="icon" href="https://static-cdn.jtvnw.net/emoticons/v1/301012188/3.0">
<style>
img {
display: block;
position: absolute;
width: 112px; height: 112px;
}
#momoko {
left: 180px; top: 150px;
}
#shizuko {
right: 180px; top: 150px;
}
#glow_blu {
left: 293px; top: 73px;
transform: rotate(45deg);
transform-origin: -50px calc(50px + 112px); /* Momoko's hands */
animation: 1.5s infinite rave_blu;
}
#glow_red {
right: calc(65px + 112px + 112px); top: 80px;
transform: rotate(-45deg);
transform-origin: calc(50px + 112px) calc(50px + 112px); /* Shizuko's hands */
animation: 1.5s infinite rave_red;
}
@keyframes rave_blu {
from {
transform: rotate(45deg);
animation-timing-function: ease-in;
}
20% {
transform: rotate(-27deg) translateY(-25px);
animation-timing-function: ease-out;
}
50% {
transform: rotate(-135deg);
animation-timing-function: ease-in;
}
80% {
transform: rotate(-27deg) translateY(-25px);
animation-timing-function: ease-out;
}
to {
transform: rotate(45deg);
}
}
@keyframes rave_red {
from {
transform: rotate(-45deg);
animation-timing-function: ease-in;
}
20% {
transform: rotate(27deg) translateY(-25px);
animation-timing-function: ease-out;
}
50% {
transform: rotate(135deg);
animation-timing-function: ease-in;
}
80% {
transform: rotate(27deg) translateY(-25px);
animation-timing-function: ease-out;
}
to {
transform: rotate(-45deg);
}
}
section {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
position: absolute;
top: 300px;
}
iframe {
display: block;
margin-bottom: 2em;
}
h1 {text-align: center;}
footer {position: absolute; bottom: 1em;}
</style>
</head>
<body>
<h1>Rave with Devi!</h1>
<img id=momoko alt="Momoko" src="https://cdn.betterttv.net/frankerfacez_emote/405154/4">
<img id=glow_blu alt="Blue glowstick" src="https://static-cdn.jtvnw.net/emoticons/v1/301012262/3.0">
<img id=shizuko alt="Shizuko" src="https://cdn.betterttv.net/frankerfacez_emote/405158/4">
<img id=glow_red alt="Red glowstick" src="https://static-cdn.jtvnw.net/emoticons/v1/301012261/3.0">
<section>
<iframe width="560" height="315" src="https://www.youtube.com/embed/tS3HPXCxJUw" frameborder="0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/i0jkaBS6TbU" frameborder="0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/B7xai5u_tnk" frameborder="0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/Nl_4MWNh08I" frameborder="0"></iframe>
</section>
<footer><a href="https://twitch.tv/devicat">Rock out with Devi live on stream!</a> | <a href="http://devicatoutlet.com/">Check out Devi's portfolio!</a></footer>
</body>
</html>