- Mitglied seit
- 24 Jan 2013
- Beiträge
- 14,202
- Punkte für Reaktionen
- 589
- Punkte
- 113
Moinsen
Base64 Data Link
(Mobiles: Langer tapp auf Link und in neuen Tab öffnen)
Statische Seite, zum Spielen
...viel Spaß beim hypno..., äh, meditieren 
Base64 Data Link
HTML:
<!DOCTYPE html>
<html>
<body style="background:rgb(0,5,48,.99);">
<div><a target="pendel" href="data:text/html;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+CjwhRE9DVFlQRSBodG1sPgo8aHRtbCBzdHlsZT0iYmFja2dyb3VuZDpyZ2IoMCw1LDQ4LC41MSk7Ij4KPGhlYWQ+CjxtZXRhIG5hbWU9InRoZW1lLWNvbG9yIiBjb250ZW50PSJyZ2IoMCw1LDQ4LC41MSkiLz4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KKntib3JkZXI6MHB4IHNvbGlkIHRyYW5zcGFyZW50O30KaHRtbCxib2R5ewoJcG9zaXRpb246YWJzb2x1dGU7Cgl0b3A6MHB4OwoJbGVmdDowcHg7Cglib3R0b206MHB4OwoJcmlnaHQ6MHB4OwoJcGFkZGluZzowcHggMHB4IDBweCAwcHg7CgltYXJnaW46MHB4IDBweCAwcHggMHB4OwoJd2hpdGUtc3BhY2U6cHJlOwoJZm9udDowLjk5ZW0vMC4xMWVtIGNhcHRpb247Cn0KYm9keXsKCWJhY2tncm91bmQ6bGluZWFyLWdyYWRpZW50KHRvIHRvcCxoc2xhKDAsMTAwJSw1MCUsLjUpLGhzbGEoMTIwLDEwMCUsNTAlLC41KSxoc2xhKDI0MCwxMDAlLDUwJSwuNSkpOwoJb3BhY2l0eTouOTk7Cn0KQGtleWZyYW1lcyBlZmZla3RlewoJdG97YmFja2dyb3VuZDpsaW5lYXItZ3JhZGllbnQodG8gcmlnaHQsaHNsYSgyNDAsMTAwJSw1MCUsLjUpLGhzbGEoMCwxMDAlLDUwJSwuNSksaHNsYSgxMjAsMTAwJSw1MCUsLjUpKTt9Cn0KQGtleWZyYW1lcyBwZW5kZWx7dG97dHJhbnNmb3JtOnJvdGF0ZSgtNjBkZWcpO319CnBlbmRlbHsKCWJhY2tncm91bmQ6bGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHJlZCxvcmFuZ2UseWVsbG93LGdyZWVuLGJsdWUscHVycGxlKTsKCWZpbHRlcjpkcm9wLXNoYWRvdygxcHggMXB4IDVweCBibGFjaykgZ3JheXNjYWxlKDg4JSk7Cglib3JkZXItcmFkaXVzOjUwJTsKCXBvc2l0aW9uOmFic29sdXRlOwoJaGVpZ2h0OjIwMHB4OwoJd2lkdGg6MjAwcHg7Cgl0b3A6MTAwcHg7CglsZWZ0OjEyNXB4OwoJb3BhY2l0eTouNjY7Cgl0cmFuc2Zvcm0tb3JpZ2luOmNlbnRlciAtMjBweDsKCXRyYW5zZm9ybTpyb3RhdGUoNjBkZWcpOwp9CnBlbmRlbCwgcGVuZGVsOmJlZm9yZSwgcGVuZGVsOmFmdGVyewpib3JkZXI6MHB4IHNvbGlkIHRyYW5zcGFyZW50Owp9CkBrZXlmcmFtZXMgcm90XzF7Cglmcm9te3RyYW5zZm9ybTpyb3RhdGUoMjcwZGVnKTt9Cgl0b3t0cmFuc2Zvcm06cm90YXRlKDYzMGRlZyk7fQp9CnplaWdlcjpiZWZvcmUsICNyb3RfMTphZnRlcntjb250ZW50OiIgIjt3aGl0ZS1zcGFjZTpwcmU7fQp6ZWlnZXJ7CglkaXNwbGF5OmlubGluZTsKCXBvc2l0aW9uOmFic29sdXRlOwoJdG9wOjE1MHB4OwoJbWFyZ2luOjBweCAwcHggMHB4IDBweDsKCWxlZnQ6MHB4OwoJd2lkdGg6MzAwcHg7Cglmb250OjkuOTllbS8uMTFlbSBtb25vc3BhY2U7CglvcGFjaXR5Oi42NjsKCWJhY2tncm91bmQ6bGluZWFyLWdyYWRpZW50KHRvIHJpZ2h0LHJlZCxvcmFuZ2UseWVsbG93LGdyZWVuLGJsdWUscHVycGxlKTsKCWZpbHRlcjpkcm9wLXNoYWRvdygxcHggMXB4IDVweCBibGFjaykgZ3JheXNjYWxlKDg4JSk7Cglib3JkZXItcmFkaXVzOjUwJTsKCXRyYW5zZm9ybTpyb3RhdGUoMjcwZGVnKTsKfQp6ZWlnZXJ7YW5pbWF0aW9uOnJvdF8xIDYwcyBzdGVwcygzNjAwLGVuZCkgaW5maW5pdGU7fQpwZW5kZWx7YW5pbWF0aW9uOnBlbmRlbCAzcyBpbmZpbml0ZSBhbHRlcm5hdGUgZWFzZS1pbi1vdXQ7fQojZWZmZWt0ZXthbmltYXRpb246ZWZmZWt0ZSAxNXMgaW5maW5pdGV9Cjwvc3R5bGU+Cjx0aXRsZT5QZW5kZWw8L3RpdGxlPgo8L2hlYWQ+Cjxib2R5IGlkPSJlZmZla3RlIj4KCTxhcnRpY2xlPgoJCTxoMT5UcmFuc3BhcmVudCBBbHVtaW5pdW08L2gxPgoJCTx6ZWlnZXIvPjwvemVpZ2VyPgoJCTxwZW5kZWw+PC9wZW5kZWw+CgkJPHA+SW5zcGlyZWQgYnk6IGh0dHBzOi8vd2lraS5zZWxmaHRtbC5vcmcvZXh0ZW5zaW9ucy9TZWxmaHRtbC9leGFtcGxlLnBocC9CZWlzcGllbDpDU1MzX3RyYW5zZm9ybS1yb3RhdGUyLmh0bWw8L3A+CgkJPHA+Li4uYW5kIG9mIGNvdXJzZTogU3RhciBUcmVrIElWICJUaGUgVm95YWdlIEhvbWUiPC9wPgoJPC9hcnRpY2xlPgo8L2JvZHk+CjwvaHRtbD4K">TRANSPARENTES ALUMINIUM</a></div>
<object name="pendel" id="pendel" width="500px" height="500px" data="view-source:"/>
</body>
</html>Statische Seite, zum Spielen
HTML:
<!DOCTYPE html>
<html style="background:rgb(0,5,48,.51);">
<head>
<meta name="theme-color" content="rgb(0,5,48,.51)"/>
<style type="text/css">
*{border:0px solid transparent;}
html,body{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px;
padding:0px 0px 0px 0px;
margin:0px 0px 0px 0px;
white-space:pre;
font:0.99em/0.11em caption;
}
body{
background:linear-gradient(to top,hsla(0,100%,50%,.5),hsla(120,100%,50%,.5),hsla(240,100%,50%,.5));
opacity:.99;
}
@keyframes effekte{
to{background:linear-gradient(to right,hsla(240,100%,50%,.5),hsla(0,100%,50%,.5),hsla(120,100%,50%,.5));}
}
@keyframes pendel{to{transform:rotate(-60deg);}}
pendel{
background:linear-gradient(to right,red,orange,yellow,green,blue,purple);
filter:drop-shadow(1px 1px 5px black) grayscale(88%);
border-radius:50%;
position:absolute;
height:200px;
width:200px;
top:100px;
left:125px;
opacity:.66;
transform-origin:center -20px;
transform:rotate(60deg);
}
pendel, pendel:before, pendel:after{
border:0px solid transparent;
}
@keyframes rot_1{
from{transform:rotate(270deg);}
to{transform:rotate(630deg);}
}
zeiger:before, #rot_1:after{content:" ";white-space:pre;}
zeiger{
display:inline;
position:absolute;
top:150px;
margin:0px 0px 0px 0px;
left:0px;
width:300px;
font:9.99em/.11em monospace;
opacity:.66;
background:linear-gradient(to right,red,orange,yellow,green,blue,purple);
filter:drop-shadow(1px 1px 5px black) grayscale(88%);
border-radius:50%;
transform:rotate(270deg);
}
zeiger{animation:rot_1 60s steps(3600,end) infinite;}
pendel{animation:pendel 3s infinite alternate ease-in-out;}
#effekte{animation:effekte 15s infinite}
</style>
<title>Pendel</title>
</head>
<body id="effekte">
<article>
<h1>Transparent Aluminium</h1>
<zeiger/></zeiger>
<pendel></pendel>
<p>Inspired by: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:CSS3_transform-rotate2.html</p>
<p>...and of course: Star Trek IV "The Voyage Home"</p>
</article>
</body>
</html>
Zuletzt bearbeitet:
