Depot43-Unterlagen - Banner 600x160 Zeit

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 Flex CSS - Banner 600x160 Zeit</title>
	<style>
	#banner600x160 {
            	position:absolute;
		width:600px;
		height:160px;
		border: 1px solid red;
            	margin:12px;
            	overflow:hidden;
	}
	div.text {
		font-family: Verdana, sans-serif;
		font-weight: bold;
		font-size: 2.2em;
		color: #e63331;
		position: absolute;
		z-index: 999;
		left: 310px;
		top: 6px;
		width: 200px;
		text-shadow: 2px 2px 5px rgba(255,255,255,0.5);
		opacity:0;
		animation: gotext 20s linear infinite;
		}
        div.legende {
		font-family: Arial, sans-serif;
		font-weight: bold;
		font-size: 0.88em;
		color: #efefef;
		position: absolute;
		bottom:0px;
		width:100%;
		text-align:center;
		z-index: 998;
		opacity: 0;
		text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
		animation: golegende 20s linear infinite;
        }
	img {
		position:absolute;
		}
        .portrait {
  		position:absolute;
		box-shadow: 2px 2px 5px rgba(0,0,0,0.6);
		border: 1px solid #fff;
        }
	img.uhrGehaeuse {
		top:14px;
		left:490px;
		transform: rotate(0Deg);
		animation: goleft 3s linear infinite;
	}
        img.uhrZeiger {
		top:14px;
		left:490px;
		transform: rotate(0Deg);
		animation: goright 6s linear infinite;
	}
        img.newton {
		position:absolute;
		top: -160px;
		left: 194px;
		width: 100px;
		transform:rotate(8Deg);
		animation: gonewton 20s linear infinite;
        }
        img.monroe {
		position:absolute;
		top: -160px;
		left:104px;
		width: 100px;
		animation: gomonroe 20s linear infinite;
        }
        img.hawking {
		position:absolute;
		top: -160px;
		left:14px;
		width: 100px;
		transform:rotate(-8Deg);
		animation: gohawking 20s linear infinite;
        }
		
		 /* KeyFrames die Angaben für die Animation *****************************/
	@keyframes goleft {
			0% {transform: rotate(0Deg);}
			100% {transform: rotate(360Deg);}
		}
        @keyframes goright {
			0% {transform: rotate(0Deg);}
			100% {transform: rotate(-360Deg);}
		}
        @keyframes gotext {
			30% {opacity: 0;}
			100% {opacity: 1;}
		}
        @keyframes golegende {
			10% {opacity: 0;}
			20% {opacity: 1;}
			100% {opacity: 1;}
		}
        @keyframes gohawking {
			10% {top: -160px;}
			13% {top:20px;}
			100% {top:20px;}
		}
        @keyframes gomonroe {
			20% {top: -160px;}
			23% {top:10px;}
			100% {top:10px;}
		}
        @keyframes gonewton {
			30% {top: -160px;}
			33% {top:20px;}
			100% {top:20px;}
		}
	</style>
</head>
<body>
	<div id="banner600x160">
		<div class="text">a short story of time!</div>
		<img class="sterne" src="http://depot43.ch/unterlagen/assets/microcss/zeit-sterne.jpg" alt="Sterne"> 
		<div class="legende">Stephen Hawking wants to play Poker with Marilin Monroe and Isaac Newton</div> 
		<img class="hawking portrait" src="http://depot43.ch/unterlagen/assets/microcss/hawking.jpg" alt="Steven Hawking"> 
		<img class="monroe portrait" src="http://depot43.ch/unterlagen/assets/microcss/zeit-monroe.jpg" alt="Marilin Monroe"> 
		<img class="newton portrait" src="http://depot43.ch/unterlagen/assets/microcss/newton.jpg" alt="Isaac Newton"> 
		<img class="uhrGehaeuse" src="http://depot43.ch/unterlagen/assets/microcss/uhr-gehaeuse.png" alt="Uhr Gehäuse"> 
		<img class="uhrZeiger" src="http://depot43.ch/unterlagen/assets/microcss/uhr-zeiger.png" alt="Uhr Zeiger"> 
	</div>
</body>
</html>


 

            

Aufgabe

Erstelle einen Banner mit dem bereitgestellten Material.

Download: images-zeit.zip

Führe folgende Schritte aus:

Lade die ZIP-Datei auf deinen Rechner, entpacke und sichte das Material
Fertige eine kurze Skizze DEINER Gestaltungsidee
(notiere die Bezeichnungen Elemente und Art der Animation)
Erstelle ein Div-Element "#banner" 600 x 160 Pixel (absolute Positionierung)
Erstelle den HTML- und CSS-Code für alle Elemente (Bilder, Texte) noch ohne Animation
(Setze alle Elemente auf die gewünschte (End)-Position, mit den CSS-Stilen)

Füge den CSS-Regeln die Animation hinzu Bsp.:

animation: gotext 20s linear infinite;

animation: {Bezeichner... } {Zeit ... }s {Art} {Wiederholungen};

Erstelle die @keyframe-Regel für die animierten Objekte Bsp.:

@keyframes gotext {
      30% {opacity: 0;}
      100% {opacity: 1;}
 }

@keyframes Bezeichner... {
      start { ... }
      end { ... }
 }

Prüfe die Animation im Browser > Element untersuchen > Animation (Firefox)