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

Страница 404 с SVG анимацией для сайта

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

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

Ведь эта не отменяет просмотр веб-сайт, где всегда можно найти неработающие ссылки, страницу поиска без результатов, страницу с ошибкой 404 вместо материала. Основной такой стиль страницы с ошибкой обязательно устанавливают на сайте, которая поражает работать на гостей и пользователей, что даже ее учитывают поиски, как Яндекс или Google.

Так выглядит при проверки на работоспособность:

Адаптивный вид страницы 404 на CSS

Установка:

HTML


CSS

Код
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Fira+Mono:wght@500&display=swap');
body {
  height: 95vh;
  background: rgb(0 0 0);
  text-align: center;
  color: #eae3e3;
  font-family: 'Fira Mono', monospace;
}
h1{
  font-size: 2.5rem;
  font-family: 'Permanent Marker', cursive;
}
div{
  transform-style: preserve-3d;
}
svg{
  width: clamp(300px , 70% , 600px);
  height: 500px;
   
}
#dsampovikas{
   
  transform: translateY(750px);
   
  animation: launch 2s ease-out forwards;
}

@keyframes launch {
  from {
  transform: translateY(750px);
  }
  to{
  perspective: 500px;
  transform: translateY(0px);  
  }
}
#gasopenud {
  animation: twinkling 2s linear ;
}
@keyframes twinkling {

  from{
  transform: scale(0);
  }
  to{
  transform: scale(1);
  }
}
.kisanu_laseted{
  opacity: 0;
  animation:appear 1s ease-in forwards;
  animation-delay: 1.8s;
}
@keyframes appear {
  from{
  opacity: 0;
  }
  to{
  opacity: 1;
  }
}
a{
  color:#F66947;
  kisanu_laseted-decoration: none;
}

Смотря на дизайн и анимацию, то здесь мы наблюдаем начальную загрузку, которая представляет собой анимированную SVG-страницу с ошибкой 404, что отлично работает корректно на устройствах всех размеров.

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

Демонстрация
25 Августа 2020 Загрузок: 4 Просмотров: 2256 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar