Update

2019-07-28 19:01:22 +02:00
parent 3a8ae47c7f
commit 28d4369fa2
4 changed files with 140 additions and 0 deletions
--- a/cgi-bin/vorbereitung/waltermode2.html
+++ b/cgi-bin/vorbereitung/waltermode2.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<head>
+        <title>WaLtErMoDe!1!</title>
+
+<style>
+#walter {
+        display: block;
+        margin-left: auto;
+        margin-right: auto;
+        margin-top: 0px;
+        //height: 70%;
+        z-index: 3;
+        
+        animation-name: stretchyWalter;
+        animation-duration: 1.8s;
+        animation-timing-function: linear;
+        animation-direction: alternate;
+        animation-iteration-count: infinite;
+}
+
+@keyframes stretchyWalter {
+			0% {
+				width: 10%;
+				height: 90%;
+			}
+			100% {
+				width: 90%;
+				height: 10%;
+			}
+}
+
+html, body {
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			margin: 0px;
+
+        animation-name: lsd;
+        animation-duration: 0.6s;
+        animation-timing-function: linear;
+        animation-direction: alternate;
+        animation-iteration-count: infinite;
+
+}
+
+h1 {
+        animation-name: lsd;
+        animation-duration: 0.6s;
+        animation-timing-function: linear;
+        animation-direction: alternate;
+        animation-iteration-count: infinite;
+        animation-delay: 2s;
+
+}
+
+@keyframes lsd {
+        0% {
+                background-color: yellow;
+        }
+        20% {
+                background-color: green;
+        }
+        40% {
+                background-color: red;
+        }
+        60% {
+                background-color: cyan;
+        }
+        80% {
+                background-color: violet;
+        }
+        100% {
+                background-color: blue;
+        }
+}
+
+.howard {
+	display: block;
+	margin-left: auto;
+	margin-right: auto;
+	height: 30%;
+	width: 30%;
+	z-index: 3;
+
+        animation-name: howardspin;
+        animation-duration: 2.4s;
+        animation-timing-function: linear;
+        animation-iteration-count: infinite;
+
+}
+
+@keyframes howardspin {
+        0% {
+                transform: rotate(0deg);
+        }
+        100% {
+                transform: rotate(360deg);
+        }
+}
+
+</style>
+</head>
+<body>
+<audio autoplay loop>
+		<source src="./fortnite.mp3" type="audio/mpeg">
+</audio>
+
+<img id="walter" src="./Hhh.jpg">
+<h1><marquee direction="right" behaviour="slide" scrollamount="20">420</marquee></h1>
+<h1><marquee direction="left" behaviour="slide" scrollamount="60">Blaze it!</marquee></h1>
+<h1><a href="https://www.youtube.com/watch?v=x84cV3iikmU"><marquee direction="left" behaviour="slide" scrollamount="60">https://www.youtube.com/watch?v=x84cV3iikmU</marquee></a></h1>
+<img class="howard" src="https://media.giphy.com/media/1oE3Ee4299mmXN8OYb/giphy.gif">
+
+</body>
+
+</html>