Neregistrovaný Přihlásit Registrovat

Přidat otázku mezi oblíbenéZasílat nové odpovědi e-mailem Tvorba animací 

<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Crossroad</title>
<style type="text/css">
html, body { margin: 0; padding: 0; background: #fff; }
h1 { font-family: "Trebuchet MS",Trebuchet,Verdana,Arial,Helvetica,sans-serif; font-size: 170%; font-weight: normal; margin: 20px; color: #333; }
p { margin: 0 20px; }
.map { width: 768px; border: 1px solid #fff; overflow: hidden; margin: 20px; position: relative; }
.road { width: 256px; height: 256px; background: transparent url(tiles.jpg); float: left; }
.void { background-position: -256px -256px; }
.horizontal { background-position: 0 0; }
.vertical { background-position: -768px 0; }
.cross { background-position: -512px 0; }
.car { position: absolute; z-index: 1; left: -100px; top: -100px; }
.pickup {
	width: 56px; height: 134px;
	margin-left: -28px; margin-top: -67px;
	background: transparent url(pickup.png) no-repeat;
}
.vw-bug {
	width: 50px; height: 98px;
	margin-left: -25px; margin-top: -49px;
	background: transparent url(vw-bug.png) no-repeat;
}
/* moz */
.animate .pickup {
	-moz-animation-name: left-to-top;
	-moz-animation-duration: 5s;
	-moz-animation-timing-function: linear;
	-moz-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-moz-animation-name: top-to-bottom;
	-moz-animation-duration: 3.5s;
	-moz-animation-timing-function: linear;
	-moz-animation-fill-mode: forwards;
}
@-moz-keyframes left-to-top {
	0% { -moz-transform: rotate(90deg); -moz-transform-origin: 28px 67px; left: 0; top: 415px;  }
	30% { -moz-transform: rotate(90deg); -moz-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -moz-transform: rotate(90deg); -moz-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -moz-transform: rotate(0deg); -moz-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-moz-keyframes top-to-bottom {
	0% { -moz-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -moz-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -moz-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -moz-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -moz-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* webkit */
.animate .pickup {
	-webkit-animation-name: left-to-top;
	-webkit-animation-duration: 5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-webkit-animation-name: top-to-bottom;
	-webkit-animation-duration: 3.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-fill-mode: forwards;
}
@-webkit-keyframes left-to-top {
	0% { -webkit-transform: rotate(90deg); -webkit-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -webkit-transform: rotate(90deg); -webkit-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -webkit-transform: rotate(90deg); -webkit-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -webkit-transform: rotate(0deg); -webkit-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-webkit-keyframes top-to-bottom {
	0% { -webkit-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -webkit-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -webkit-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -webkit-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -webkit-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* ms */
.animate .pickup {
	-ms-animation-name: left-to-top;
	-ms-animation-duration: 5s;
	-ms-animation-timing-function: linear;
	-ms-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-ms-animation-name: top-to-bottom;
	-ms-animation-duration: 3.5s;
	-ms-animation-timing-function: linear;
	-ms-animation-fill-mode: forwards;
}
@-ms-keyframes left-to-top {
	0% { -ms-transform: rotate(90deg); -ms-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -ms-transform: rotate(90deg); -ms-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -ms-transform: rotate(90deg); -ms-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -ms-transform: rotate(0deg); -ms-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-ms-keyframes top-to-bottom {
	0% { -ms-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -ms-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -ms-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -ms-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -ms-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* o */
.animate .pickup {
	-o-animation-name: left-to-top;
	-o-animation-duration: 5s;
	-o-animation-timing-function: linear;
	-o-animation-fill-mode: forwards;
}
.animate .vw-bug {
	-o-animation-name: top-to-bottom;
	-o-animation-duration: 3.5s;
	-o-animation-timing-function: linear;
	-o-animation-fill-mode: forwards;
}
@-o-keyframes left-to-top {
	0% { -o-transform: rotate(90deg); -o-transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { -o-transform: rotate(90deg); -o-transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { -o-transform: rotate(90deg); -o-transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { -o-transform: rotate(0deg); -o-transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@-o-keyframes top-to-bottom {
	0% { -o-transform: rotate(180deg); left: 350px; top: 0; }
	15% { -o-transform: rotate(180deg); left: 350px; top: 128px; }
	50% { -o-transform: rotate(175deg); left: 355px; top: 384px; }
	60% { -o-transform: rotate(180deg); left: 360px; top: 460px; }
	100% { -o-transform: rotate(180deg); left: 350px; top: 768px; }
}
/* */
.animate .pickup {
	animation-name: left-to-top;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
.animate .vw-bug {
	animation-name: top-to-bottom;
	animation-duration: 3.5s;
	animation-timing-function: linear;
	animation-fill-mode: forwards;
}
@keyframes left-to-top {
	0% { transform: rotate(90deg); transform-origin: 28px 67px; left: 0; top: 415px; }
	30% { transform: rotate(90deg); transform-origin: -120px 0; left: 470px; top: 330px; }
	50% { transform: rotate(90deg); transform-origin: -120px 0; left: 470px; top: 330px; }
	70% { transform: rotate(0deg); transform-origin: -120px 0; left: 420px; top: 270px; }
	100% { left: 420px; top: -80px; }
}
@keyframes top-to-bottom {
	0% { transform: rotate(180deg); left: 350px; top: 0; }
	15% { transform: rotate(180deg); left: 350px; top: 128px; }
	50% { transform: rotate(175deg); left: 355px; top: 384px; }
	60% { transform: rotate(180deg); left: 360px; top: 460px; }
	100% { transform: rotate(180deg); left: 350px; top: 768px; }
}
</style>
</head><body>
<h1>Crossroad</h1>
<p>
<input type="button" id="start" value="start">
</p>
<div class="map">
<span class="void road"></span>
<span class="vertical road"></span>
<span class="void road"></span>
<span class="horizontal road"></span>
<span class="cross road"></span>
<span class="horizontal road"></span>
<div class="pickup car"></div>
<div class="vw-bug car"></div>
</div>
<script>
document.getElementById('start').onclick = function() {
	document.documentElement.className = '';
	setTimeout(function() {
		document.documentElement.className = 'animate';
	}, 100);
};
</script>
</body></html>
edit// omluva- toto je losův původní kód.

Reakce na odpověď

1 Zadajte svou přezdívku:
2 Napište svou odpověď:
3 Pokud chcete dostat ban, zadejte libovolný text:

Zpět do poradny