<pre class="smile we">
HHHH HHHH HHHHHHH
HHHH HHH HHHH HHHH
HHHH HHHHH HHHH HHHHHH
HHHHHHH HHHHHHH HHHH
HHHHH HHHHH HHHHHHH
</pre>
<pre class="smile are">
HHHHHHHH HHHHHHHHH HHHHHHH
HHHH HHHH HHHH HHH HHHH
HHHHHHHHHH HHHHHHHH HHHHHH
HHHH HHHH HHHH HHH HHHH
HHHH HHHH HHHH HHH HHHHHHH
</pre>
<pre class="smile mother">
HHHHH HHHHH HHHHHHHHH HHHHHHHHHH HHHH HHHH HHHHHHH HHHHHHHHH
HHHHHHH HHHHHHH HHHHHHHHH HHHHHHHHHH HHHH HHHH HHHH HHHH HHH
HHHH HHHHH HHHH HHHH HHH HHHH HHHHHHHHHH HHHHHH HHHHHHHH
HHHH HHH HHHH HHHH HHH HHHH HHHH HHHH HHHH HHHH HHH
HHHH HHHH HHHHHHHHH HHHH HHHH HHHH HHHHHHH HHHH HHH
</pre>
<pre class="smile father">
HHHHHHH HHHHHHHH HHHHHHHHHH HHHH HHHH HHHHHHH HHHHHHHHH
HHHH HHHH HHHH HHHHHHHHHH HHHH HHHH HHHH HHHH HHH
HHHHHHH HHHHHHHHHH HHHH HHHHHHHHHH HHHHHH HHHHHHHH
HHHH HHHH HHHH HHHH HHHH HHHH HHHH HHHH HHH
HHHH HHHH HHHH HHHH HHHH HHHH HHHHHHH HHHH HHH
</pre>
<pre class="smile gentlemen">
HHHHHHHH HHHHHHH HHHHHH HHH HHHHHHHHHH HHHH HHHHHHH HHHHH HHHH HHHHHHH HHHHHH HHH
HHHH HHHH HHHHHHH HHH HHHHHHHHHH HHHH HHHH HHHHHHH HHHHHHH HHHH HHHHHHH HHH
HHHH HHHH HHHHHH HHHH HHHHHH HHHH HHHH HHHHHH HHHH HHHHH HHHH HHHHHH HHHH HHHHHH
HHHH HHH HHHH HHHH HHHHH HHHH HHHH HHHH HHHH HHH HHHH HHHH HHHH HHHHH
HHHHHH H HHHHHHH HHHH HHHH HHHH HHHHHHH HHHHHHH HHHH HHHH HHHHHHH HHHH HHHH
</pre>
<!-- This is my tweaked version of one of these dudes https://textart4u.blogspot.com/2012/12/gangnam-style-ascii-text-art.html -->
<pre class="dance one">
xXXXXXx
xXY Yx
xX X
X ( ) ( ) X
X X
X xXX X
ooX-XXY---x00o
o000-000----0000o
0000000xxX00000000o
000000YXX00000000
o000-----0000o
o00000oXXXX00000o
o00XXXXXXXXXXXXX00o
xXXXXXXXXXXXXXXXXXXx
XXXXXXXYYYYYYYXXXXXXX
xXXXXXX xXXXXXXX
XXXXXX XXXXXXXx
xXXXX XXXXXx
</pre>
<pre class="dance two">
xXXXXXx
xXY Yx
xX X
X ( ) ( )X
X X
X xXX X
ooX-XXY---x00o
o000-000----0000o
0000000xxX00000000o
000000YXX00000000
o000-----0000o
o00000oXXXX000000o
o00XXXXXXXXXXXXXx00o
xXXXXXXXXXXXXXXXXXXXX
XXXXXXXYYYYYYYXXXXXXX
xXXXXXX xXXXXXXX
XXXXXX XXXXXXXx
xXXXX XXXXXx
</pre>
<pre class="dance three">
xXXXXXx
xXY Yx
xX X
X ( ) ( )X
X X
X xXX X
ooX-XXY---x00o
o000-000----0000o
0000000xxX00000000o
000000YXX00000000
o000-----0000o
o00000oXXXXo0000o
o000oXXXXXXXXXo000o
XXXXXXXXXXXXXXXxXXx
xXXXXXXXXXXXXXXXXXXX
XXXXXXYY YXXXXXXX
XXXXXX xXXXXXXX
XXXXXX XXXXXXx
xXXXX XXXXXx
</pre>
<pre class="dance four">
xXXXXXx
xXY Yx
xX X
X( ) ( ) X
X X
X xXX X
ooX-XXY---x00o
o000-000----0000o
0000000xxX00000000o
000000YXX00000000
o000-----0000o
o00000oXXXX00000o
o00XXXXXXXXXXXXX00o
xXXXXXXXXXXXXXXXXXXXx
XXXXXXXYYYYYYYXXXXXXX
xXXXXXY YXXXXXXx
XXXXXX XXXXXXx
xXXXX xXXXXx
</pre>
<pre class="dance five">
xXXXXXx
xXY Yx
xX X
X( ) ( ) X
X X
X xXX X
ooX-XXY---x00o
o000-000----0000o
0000000xxX00000000o
000000YXX00000000
o000-----0000o
o000XXXXXXx0000o
o00xXXXXXXXXXXx00o
xXXXXXXXXXXXXXXXXXXx
XXXXXXXXXXXXXXXXXXXXx
XXXXXXX YYXXXXXXX
xXXXXXY YXXXXXXx
XXXXXX XXXXXx
xXXXX xXXXXx
</pre>@import "compass/css3";
html,
body {
min-height: 400px;
background: #0079c2;
}
.smile,
.dance {
position: absolute;
top: 100px;
left: 50%;
font-size: 12px;
text-align: center;
width: 750px;
margin-left: -375px;
color: #fff;
font-family: monospace;
opacity: 0;
}
.dance {
top: 20px;
}
$delay: 1s;
$time: 500; // in ms
$dance: 100; // in ms
$dances: 3;
$words-time: $time * 5;
$dance-time: $dances * 8 * $dance;
$total-time: $dance-time + $words-time;
@keyframes a-1 {
0% { opacity: 1;
}
10.20% {
opacity: 1;
}
10.21% {
opacity: 0;
}
}
@keyframes a-2 {
10.20% {
opacity: 0;
}
10.21% {
opacity: 1;
}
20.40% {
opacity: 1;
}
20.41% {
opacity: 0;
}
}
@keyframes a-3 {
20.40% {
opacity: 0;
}
20.41% {
opacity: 1;
}
30.60% {
opacity: 1;
}
30.61% {
opacity: 0;
}
}
@keyframes a-4 {
30.60% {
opacity: 0;
}
30.61% {
opacity: 1;
}
40.80% {
opacity: 1;
}
40.81% {
opacity: 0;
}
}
@keyframes a-5 {
40.80% {
opacity: 0;
}
40.81% {
opacity: 1;
}
51.00% {
opacity: 1;
}
51.01% {
opacity: 0;
}
}
@keyframes a-6 {
51.00% {
opacity: 0;
}
51.01% {
opacity: 1;
}
53.04% {
opacity: 1;
}
53.05% {
opacity: 0;
}
59.16% {
opacity: 0;
}
59.17% {
opacity: 1;
}
61.20% {
opacity: 1;
}
61.21% {
opacity: 0;
}
67.32% {
opacity: 0;
}
67.33% {
opacity: 1;
}
69.36% {
opacity: 1;
}
69.37% {
opacity: 0;
}
75.48% {
opacity: 0;
}
75.49% {
opacity: 1;
}
77.52% {
opacity: 1;
}
77.53% {
opacity: 0;
}
83.64% {
opacity: 0;
}
83.65% {
opacity: 1;
}
85.68% {
opacity: 1;
}
85.69% {
opacity: 0;
}
91.80% {
opacity: 0;
}
91.81% {
opacity: 1;
}
93.84% {
opacity: 1;
}
93.85% {
opacity: 0;
}
99.96% {
opacity: 0;
}
99.97% {
opacity: 1;
}
100% {
opacity: 1;
}
}
@keyframes a-7 {
53.04% {
opacity: 0;
}
53.05% {
opacity: 1;
}
55.08% {
opacity: 1;
}
55.09% {
opacity: 0;
}
57.12% {
opacity: 0;
}
57.13% {
opacity: 1;
}
59.16% {
opacity: 1;
}
59.17% {
opacity: 0;
}
69.36% {
opacity: 0;
}
69.37% {
opacity: 1;
}
71.40% {
opacity: 1;
}
71.41% {
opacity: 0;
}
73.44% {
opacity: 0;
}
73.45% {
opacity: 1;
}
75.48% {
opacity: 1;
}
75.49% {
opacity: 0;
}
85.68% {
opacity: 0;
}
85.69% {
opacity: 1;
}
87.72% {
opacity: 1;
}
87.73% {
opacity: 0;
}
89.76% {
opacity: 0;
}
89.77% {
opacity: 1;
}
91.80% {
opacity: 1;
}
91.81% {
opacity: 0;
}
}
@keyframes a-8 {
55.08% {
opacity: 0;
}
55.09% {
opacity: 1;
}
57.12% {
opacity: 1;
}
57.13% {
opacity: 0;
}
71.40% {
opacity: 0;
}
71.41% {
opacity: 1;
}
73.44% {
opacity: 1;
}
73.45% {
opacity: 0;
}
87.72% {
opacity: 0;
}
87.73% {
opacity: 1;
}
89.76% {
opacity: 1;
}
89.77% {
opacity: 0;
}
}
@keyframes a-9 {
61.20% {
opacity: 0;
}
61.21% {
opacity: 1;
}
63.24% {
opacity: 1;
}
63.25% {
opacity: 0;
}
65.28% {
opacity: 0;
}
65.29% {
opacity: 1;
}
67.32% {
opacity: 1;
}
67.33% {
opacity: 0;
}
77.52% {
opacity: 0;
}
77.53% {
opacity: 1;
}
79.56% {
opacity: 1;
}
79.57% {
opacity: 0;
}
81.60% {
opacity: 0;
}
81.61% {
opacity: 1;
}
83.64% {
opacity: 1;
}
83.65% {
opacity: 0;
}
93.84% {
opacity: 0;
}
93.85% {
opacity: 1;
}
95.88% {
opacity: 1;
}
95.89% {
opacity: 0;
}
97.92% {
opacity: 0;
}
97.93% {
opacity: 1;
}
99.96% {
opacity: 1;
}
99.97% {
opacity: 0;
}
}
@keyframes a-10 {
63.24% {
opacity: 0;
}
63.25% {
opacity: 1;
}
65.28% {
opacity: 1;
}
65.29% {
opacity: 0;
}
79.56% {
opacity: 0;
}
79.57% {
opacity: 1;
}
81.60% {
opacity: 1;
}
81.61% {
opacity: 0;
}
95.88% {
opacity: 0;
}
95.89% {
opacity: 1;
}
97.92% {
opacity: 1;
}
97.93% {
opacity: 0;
}
}
.we {
animation: a-1 ($total-time * 1ms) $delay infinite linear;
}
.are {
animation: a-2 ($total-time * 1ms) $delay infinite linear;
}
.mother {
animation: a-3 ($total-time * 1ms) $delay infinite linear;
}
.father {
animation: a-4 ($total-time * 1ms) $delay infinite linear;
}
.gentlemen {
animation: a-5 ($total-time * 1ms) $delay infinite linear;
}
.one {
animation: a-6 ($total-time * 1ms) $delay infinite linear;
}
.two {
animation: a-7 ($total-time * 1ms) $delay infinite linear;
}
.three {
animation: a-8 ($total-time * 1ms) $delay infinite linear;
}
.four {
animation: a-9 ($total-time * 1ms) $delay infinite linear;
}
.five {
animation: a-10 ($total-time * 1ms) $delay infinite linear;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.