Página de erro 404 animada com CSS

Este tutorial mostra como desenvolver uma página de erro 404 animada. Para tal efeito usamos algumas imagens e pequenas regras de CSS para animação. O código é simples e quem já possui um conhecimento em CSS entenderá rapidamente o significado das regras para esse efeito. Veja o resultado final da página de erro 404 animada.

<div class="container">
	<div class="box"><div class="cover_pan"></div>
</div>

Aplicamos no elemento marcado com a class box uma imagem de fundo (404.png). Ela funcionará como uma máscara.

body {color: #fff; margin: 0;background: url(img/texture.png) repeat;}
.container {width: 960px;margin:50px auto; text-align: center; font: 13px/22px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;color: #000;}
.box {
	background: url(img/404.png) no-repeat 0 0;
	border-bottom: 5px solid #000;
	height: 343px;
	margin-bottom: 25px;
 	padding-bottom: 50px;
}

O código CSS abaixo é responsável por fazer grande parte da animação. Definimos a imagem que será rolada no fundo, nesse caso a imagem covers.jpg, definimos o tempo da animação e que a mesma será de forma contínua, ficará em um loop infinito.

.cover_pan{
	background: #fff url(img/covers.jpg) repeat 1055px bottom;
	height: 343px;
	margin-left:1px; 
	overflow: hidden;
	position: relative;
	width:99.5%;
	z-index: -1;
	
	-moz-animation-name: pan;
	-moz-animation-duration:40s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: linear;
	
	-webkit-animation-name: pan;
	-webkit-animation-duration:40s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: linear;
}

Esta é uma das implementações mais simples do código que você terá que aplicar. Estamos deslizando a posição de fundo. Cover_pan da direita para a esquerda.

@-moz-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

@-webkit-keyframes pan {
	0% {
		background-position: 1338px bottom;
	}
	100% {
		background-position: left bottom;
	}
}

Você pode baixar arquivos usados neste tutorial para estudar.
Artigo Original.
Me siga no Twitter: @kadunew
Forte abraço!