Andarilho • 22.04.18 17:05![[HTML/CSS] Página de erro 404 [Animada] Empty](https://2img.net/i/empty.gif)
[HTML/CSS] Página de erro 404 [Animada] 22.04.18 17:05
Olá, Basicamente e uma Index em HTML animada, o efeito e aquele efeito "3D" utilizado em jogos como Watch Dogs
Créditos:
zebbo.biz
- 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
