ZorNet.Ru — сайт для вебмастера » HTML и CSS » Страница 404 ошибка с анимацией на чистом CSS

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

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

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

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

Страница сайта под номером 404 не найдено

Приступаем к установке:

HTML

Код

Код

<div class="mosterta-inlymoved">404</div>
<span class="tenarkedes">Страницы не найдено
</span>
<img src="http://zornet.ru/ABVUN/too-much-tv-static.gif" class="ncelede-dupcoming" />

CSS

Код

.ncelede-dupcoming {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  top: -100px;
  opacity: 0.05;
  z-index: 230;
  user-select: none;
  user-drag: none;
}

.mosterta-inlymoved {
  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;
}

.mosterta-inlymoved:after {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 163px;
  height: 57px;
  line-height: 57px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: blue;
  animation: noise-1 .2s linear infinite;
}

.tenarkedes {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 23px;
  font-style: italic;
  text-align: center;
  width: 225px;
  height: 58px;
  line-height: 59px;
  margin: auto;
  position: absolute;
  top: 153px;
  bottom: 0;
  left: 0;
  right: 0;
  animation: noise-3 3s linear infinite;
}

.mosterta-inlymoved:before {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 97px;
  height: 58px;
  line-height: 58px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: red;
  animation: noise-2 .3s 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);}
}

Чтоб понять как все будет отображаться, то для этого вы изначально можете посмотреть в работе.

Демонстрация

28 Октября 2018 Просмотров: 1263 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0