Compartilhe
Ir em baixo
avatar
Membro

Titulo : Água dura Pedra mole tanto bate até que vrauu
Registro : 15/06/2017
Mensagens : 67
Reputação : 1

Ver perfil do usuário

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

em Dom 22 Abr 2018 - 17:05
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
avatar
Administrador
 Administrador
Titulo : daemonium impetus
Registro : 18/12/2014
Mensagens : 5637
Reputação : 726

Ver perfil do usuário

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

em Dom 22 Abr 2018 - 17:17
Bem não têm print logo não é muito apelativo depois os créditos intrigado



_____

Testei muito bom esse efeito
Voltar ao Topo
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum