Страница 404 с анимацией на чистом CSS

На любом сайте страница под номером 404 должна идти в обязательном порядке, это для касается каталога или блога, так как поисковые системы ее учитывают. Ведь бывает такое, что некоторые старые материалы или просто по ошибке веб мастер может удалить страницы. Что для сайта не сильная потеря, если она не в топ по ключевым словам. А вот на поисковых системах этот запрос будет оставаться некоторое время.

Где при клике на материал, что был удален, гость или пользователь попадет именно на страницы 404, где можно написать, что такой страницы на сайте не существует или файл был удален. Это больше зависит от самого веб разработчика и безусловно от тематики ресурса. Что по анимации, то она отлично отображается на темном фоне, где он представлен, вид ее показывает, что происходит сбой, а точнее мигает, где аналогично можно скорость по трюку задать.

Также вы самостоятельно можете поставить логотип сайта и кнопку, чтоб выйти на главную страницу интернет ресурса, так чтоб потенциальный пользователь стразу не закрыл, а мог ознакомиться. Это почему нет этого материала, также как можно перейти на сайт или категорий, здесь все зависит от того, сколько на странице будет кнопок выхода на портал.

HTML

<div class="error">404</div>
<br /><br />
<span class="info">File not found</span>
<img src="http://images2.layoutsparks.com/1/160030/too-much-tv-static.gif" class="static" />

CSS

@import url(https://fonts.googleapis.com/css?family=Gilda+Display);

html {
  background: radial-gradient(#000, #111);
  color: white;
  overflow: hidden;
  height: 100%;
  user-select: none;
}

.static {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  top: -100px;
  opacity: 0.05;
  z-index: 230;
  user-select: none;
  user-drag: 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);}
}

[center][/center]