Você não está conectado. Conecte-se ou registre-se

Power Pixel » Paraíso dos Geeks » Universo dos Desenvolvedores » CMS & Layouts » [HTML/CSS] Página de erro 404 [Animada]

[HTML/CSS] Página de erro 404 [Animada]

Ver o tópico anterior Ver o tópico seguinte Ir em baixo  Mensagem [Página 1 de 1]

1[HTML/CSS] Página de erro 404 [Animada] Empty [HTML/CSS] Página de erro 404 [Animada] em Dom 22 Abr 2018 - 17:05

Andarilho

Membro Prata


Andarilho
Olá, Basicamente e uma Index em HTML animada, o efeito e aquele efeito "3D" utilizado em jogos como Watch Dogs 

Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>404 Page Not Found</title>
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Gilda+Display);html{background:radial-gradient(#000,#111);color:white;overflow:hidden;height:100%;user-select:none;}.error{text-align:center;font-family:'Gilda Display',serif;font-size:95px;font-style:italic;text-align:center;width:100px;height:60px;line-height:60px;margin:auto;position:absolute;top:0;bottom:0;left:-60px;right:0;animation:noise 2s linear infinite;overflow:default;}.error:after{content:'404';font-family:'Gilda Display',serif;font-size:100px;font-style:italic;text-align:center;width:150px;height:60px;line-height:60px;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;color:blue;animation:noise-1 .2s linear infinite;}.info{text-align:center;font-family:'Gilda Display',serif;font-size:15px;font-style:italic;text-align:center;width:200px;height:60px;line-height:60px;margin:auto;position:absolute;top:140px;bottom:0;left:0;right:0;animation:noise-3 1s linear infinite;}.error:before{content:'404';font-family:'Gilda Display',serif;font-size:100px;font-style:italic;text-align:center;width:100px;height:60px;line-height:60px;margin:auto;position:absolute;top:0;bottom:0;left:0;right:0;opacity:0;color:red;animation:noise-2 .2s linear infinite;}@keyframes noise-1{0%,20%,40%,60%,70%,90%{opacity:0;}10%{opacity:.1;}50%{opacity:.5;left:-6px;}80%{opacity:.3;}100%{opacity:.6;left:2px;}}@keyframes noise-2{0%,20%,40%,60%,70%,90%{opacity:0;}10%{opacity:.1;}50%{opacity:.5;left:6px;}80%{opacity:.3;}100%{opacity:.6;left:-2px;}}@keyframes noise{0%,3%,5%,42%,44%,100%{opacity:1;transform:scaleY(1);}4.3% {opacity: 1; transform: scaleY(1.7);}
 43% {opacity: 1; transform: scaleX(1.5);}
}

@keyframes noise-3 {
 0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
 4.3% {opacity: 1; transform: scaleY(4);}
 43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
}
</style>
</head>
<body>
<body>
<div class="error">404</div>
<br /><br />
<span class="info">Don't think that exists.</span>
</body>
</body>
</html>

Créditos:
zebbo.biz

pedxz

Administrador


pedxz
Bem não têm print logo não é muito apelativo depois os créditos intrigado



_____

Testei muito bom esse efeito



És livre de contactar-me pelas [Você precisa estar registrado e conectado para ver este link.]  [Você precisa estar registrado e conectado para ver esta imagem.]

[Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.] [Você precisa estar registrado e conectado para ver este link.]

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo  Mensagem [Página 1 de 1]

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum