PLANTILLA ANIMACION FUERTE ASCII
Lo llame asi puesto que este dibujo ASCII era de caracteres fuertes para la tipica etiqueta de const frames " ` "
asi que usa la etiqueta " pre " como frames
CODIGO:
<!DOCTYPE html>
<html lang="en">
<!-- PLANTILLA ANIMACION ASCII TIPO FUERTE V1 -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ASCII Art Animación</title>
<style>
body {
background-color: black;
color: lime;
font-family: monospace;
font-size: 12px;
line-height: 1;
white-space: pre;
text-align: center;
margin: 0;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
pre {
display: none;
}
pre.active {
display: block;
}
</style>
</head>
<body>
<pre class="active">
.-/+ossooooooo+/:.
`:osydhyo++: :yyyyydN@ho:`
:sho:``. .+o``d@h./N@@@@@@@@s:
-s@dd- :--@s@@@@@@@@@@@@@@@@@Ny:
/dho`. ///N@yy::@@@@N+y@dNhd@N@@+`
/ho` `@@@/- `:::sdosNdd@@@o@@@N+
.h+ :o@@@@@@@@/:---:::::o@@@@@@@@@@-
/h. `+s@@@@@@@@@@@@@@@@@@@@dy@@@@Nd@@@@o
oy` :@@@@@@@@@@@@@@@@@@@@@@Nyyo@@@yNdsh@s
+h: -od@@@@@@@@@@@@@@@@@@@@@@@@N.y@@@@@:`+@s
-@`` y@@@@@@@@@@@@@@@@@@@@@@@@@@@N@-d@@N-``o@:
h/ y@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@h--.```.s@
.NN@y.` hh@@@@@@dhhhN@@@@@@@@@@@@@@@@@@@s````-N:
/dN@@@o` `yyyyyy syN@@@@@@@@@@@@@@@@h+`````so
o@@@@@@s// h@@@@@@@@@@@@@Nd+-``````oy
+N@@@@@@@No++ h@@@@@@@@@@@@@d:.```````ss
.N@@@@@@@@@@@` /+N@@@@@@@@@@@s`````````d:
dh@@@@@@@@N/` @@@@@@@@@@@@/````````:@
-@o@@@@@@@@- yh@@@@@@@@@@@N.ydy````.d/
oy:@@@@@NNs ./@@@@@@@@@N-.:@N:````sy
syh@@@@d` o@@@@@@@Nd+``y+`````oy
+hh@@@N- oh@@@@Nd/`````````.ys
-hhN@@` oN+++:-`````````/d:
+ddd. ..````````````:yo`
`+@d: ``````````/yo`
:yh/ `````````:sy/
`/ss+- ```````-+ss/`
./oss+:-` `-::::///++oyyso/.
`-:+oooyhhhhhyso+/-`
</pre>
<pre>
.-/+ooooooosoo+/:.
`:oy@@yo+oy@@dsshdo@NdNNNyso:`
:ohs/:-. :s+````/+@@@@@N@@@Nooyhds:
-sy+-` -+dN@@@@@@@@NyN@Ny:
/y+` -@@@@@@@@@@N@@@@d+`
/h/ s@@@@@@@@@@@@@@y:h+
.h+ +ddd@@@@@@@@@N/`/h-
/h. .+hy@@@@hyyy::`.ho
oy` `//h@N@@d````+.``ss
+h ---y@@+`.y:``-/ys
-@` `.-:d@y--``-.d:
h/ `````.``d/...:@
.N ```.````-sd@N@:
/h `````````.o@@@o
oy `````````.@@@@y
+d` ` `````````-@@@@s
.@` ` `````````/@@@@:
d/ ```````````-N@@@
-@` .. ```````````.y@@/
o@. ``.`````````-h@y
sN+ ```````````:N@y
+@h` ```````````/N@s
-@h ``````````.s@@:
+h: `+ ```````````/hNo`
`+y/ :: ````````.oddo`
:ss: ````````-ody/
`/ss+- ```````-+ss/`
./ooo+:-` ``.`.-:/osso/.
`-:+oooosyyyhsso+/-`
</pre>
<pre>
.-/+oooooooooo+/:.
`:oy@@@@dyy::--yd@dsy@@@N@yo:`
:sdhy+sh/..``` +d:```:osN@@N@@@s:
-sN@@+ :. `oyN@@@@Ny:
/dNho+ `.:@@@@@@@+`
/dd: ``.s@@@@@@N+
.ho+` ```-+@N@@@@@-
/@: ``````o@N@@@o
od` `````:/hNN:ss
+h. ````````:/s@-ds
-N- ` ```.````.:/hd:
h/ ````````````.+@
.N ```.``````````d:
/@`` ``````````````so
od-``- ``````````````oy
+d` .@++` ``````````````ss
.N /h+` ``````````````d:
d/`h:s: `````````````:@
-@+@d-h :: `````````````.d/
oN@@N@N+` ` ```.`````````sy
s@@@@@@@+- ``````````````oy
+@@@@@@@@+ ```````````.ys
-do.+N@@s ````````````/d:
+h: :y+ /+ ```````````:yo`
`+y/ `. -+- ``````````/yo`
:ss: `` `````````:sy/
`/ss+- ```````-+ss/`
./osys+//.` ``.--/osso/.
`-:+osssoooyssso+/-`
</pre>
<script>
let frames = document.querySelectorAll('pre');
let currentFrame = 0;
function showNextFrame() {
frames[currentFrame].classList.remove('active');
currentFrame = (currentFrame + 1) % frames.length;
frames[currentFrame].classList.add('active');
}
setInterval(showNextFrame, 500);
</script>
</body>
</html>
MUESTRA: https://eartham.blogspot.com/