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

Анимированные 404 страницы в HTML и CSS

Анимированные 404 страницы в HTML и CSS
Думаю многим обидно, когда они попадают на 404 страницу ошибки, это значит материал удален или перемещен, где нет не какой информации для выхода. Так, чтоб можно было прямо с этой страницы выйти на сайт или на тот адрес, где страницы ранее была прервана. И не секрет, что поисковые системы требуют, чтоб все они корректно отражали, как информацию, там и дизайн на всех мобильных телефонах.

И здесь решил сделать небольшую подборку на страницы Not Found, которые по своей структуре просты, что некоторые также имеют интересную анимацию. Но главное, вы можете поставить кнопки или сделать ее адаптивной, что некоторые по умолчанию настроены на мобильные гаджет. Где сами по своему оформлению они могут подойти на разные тематические сайты, со своей интересной стилистикой по цветовой гамме.

И так начнем!

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

Так почему они вообще существуют?

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

Простая CodePen Home 404 Страница не найдена

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

Страницы не существует на сайте

HTML

Код
<div id="stars">
  <span class="star"></span>
</div>
<div class="center">
  <h1>404</h1>
  <h2>Страницы не найдена</h2>
</div>

CSS

Код
@import url('https://fonts.googleapis.com/css?family=Ubuntu&display=swap');
body{
  background-image: url(http://zornet.ru/Abavaga/background.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;  
  width: 100vw;
  overflow: hidden;
  font-family: 'Ubuntu', sans-serif;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  color: white;
  text-align: center;
}
h1{
font-size: 8em;
  line-height: 0em;
}
h2{
font-size: 4em;
}
#stars{
position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}
#stars .star{
  width: 1px;
  height: 1px;
  background: white;
  top: 10px;
  left: 10px;
  position: absolute;
  border-radius: 100%;
  animation-name: shine;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  opacity: 0;
}
@keyframes shine {
  0% {opacity: 0}
  50% {opacity: 1}
  100% {opacity: 0}
}

JS

Код
$(document).ready(function(){
  var stars = 500;
  for (var i = 0; i < stars; i++){
  var top = Math.floor((Math.random() * 100) + 1);
  var left = Math.floor((Math.random() * 100) + 1);
  var delay = Math.floor((Math.random() * 2500) + 100);
  $("#stars").append('<span class="star" style="top: '+top+'vh; left: '+left+'vw;animation-delay: '+delay+'ms"></span>');
  }
});

На этом все, файл JS нужен здесь, чтоб получилось красивое звездное небо.

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

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

Анимация на страницу под номером 404

HTML

Код
<div class="error-contain">
  <div class="error-text">
  <h1>404</h1>
  <p>Страница не найдена.</p>
  <p>Мы искали высоко и низко.</p>
  </div>
  <div class="binoculars">
  <div class="back-bino"></div>
  <div class="left-bino"></div>
  <div class="right-bino"></div>
  <div class="left-bino-lense">
  <div class="eye"></div>
  </div>
  <div class="right-bino-lense">
  <div class="eye"></div>
  </div>
  </div>
</div>

CSS

Код
.error-contain {
  position: absolute;
  height: 350px;
  width: 300px;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: white;
  border-radius: 10px;
  box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.error-text h1 {
  font-size: 100px !important;
  font-family: monospace;
  margin: 0;
  text-shadow: 1px 1px 1px #fff, -1px -1px 1px black;
}
.error-text {
  text-align: center;
  font-weight: bold;
}
.error-text p {
  font-family: monospace;
  font-size: 16px;
}
.error-text p:nth-child(3) {
  margin-top: 150px;
}
.binoculars {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-60%, 20%);
  transition: 1s;
}
.binoculars {
/* animation-name: wiggle; */
  animation-duration: 10s;
  animation-delay: 5s;
  animation-iteration-count: infinite;
}

.left-bino-lense, .right-bino-lense {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  border: 5px solid black;
  display: inline-block;
  transform: skewX(-10deg);
  background: white;
  overflow: hidden;
  position: relative;
}
.left-bino-lense {
  margin-right: 10px;
}
.left-bino-lense::before, .right-bino-lense::before {
  width: 20px;
  height: 20px;
  content: '';
  display: block;
  background: black;
  position: absolute;
  border: 3px solid #3066c9;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-70%,-55%);
  animation-name: eye-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 3s;
}

.back-bino {
  width: 70px;
  height: 30px;
  background: black;
  position: absolute;
  top: 23px;
  left: 40px;
}
.left-bino, .right-bino {
  position: absolute;
  height: 100px;
  width: 80px;
  perspective: 80px;
  transform: rotate(100deg);
  right: -25px;
  top: 1px;
}
.right-bino {
  left: -1px;
}

.left-bino::after, .right-bino::after {
  content: '';
  padding: 21px;
  padding-top: 45px;
  position: absolute;
  border: 1px solid black;
  background: black;
  transform-style: preserve-3d;
  transform: rotateX(30deg);
  border-radius: 30% 80% 0 0;
  left: 1px;
  top: -4px;
}

.left-bino-lense .eye {
  width: 100%;
  height: 100%;
}

.eye::before, .eye::after {
  content: '';
  display: block;
  width: 45px;
  height: 26px;
  background: #f5cd8c;
  position: absolute;
  transition: 1s;
}
.eye::before {
  border-radius: 50% 50% 0 0;
  border-bottom: 2px solid #b88c44;
  top: -30px;
  animation-name: eye-up;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}
.eye::after {
  border-radius: 0 0 50% 50%;
  border-top: 2px solid #b88c44;
  bottom: -30px;
  animation-name: eye-down;
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

.binoculars:hover .eye::after {
  bottom: -30px;
}
.binoculars:hover .eye::before {
  top: -30px;
}

@keyframes eye-up {
  0% {
  top: -30px;
  }
  50% {
  top: -30px;
  }
  55% {
  top: -5px;
  }
  60% {
  top: -30px;
  }
}

@keyframes eye-down {
  0% {
  bottom: -30px;
  }
  50% {
  bottom: -30px;
  }
  55% {
  bottom: -3px;
  }
  60% {
  bottom: -30px;
  }
}

@keyframes wiggle {
  0% {
  transform: translate(-50%,-20%);
  }
  10% {
  transform: skew(-20deg) translate(-50%,-20%) rotate(20deg);
  }
  30% {
  transform: skew(20deg) translate(-50%,-20%) rotate(-20deg);
  }
  40% {
  transform: translate(-50%,-20%);
  }
  50% {
   
  }
}

@keyframes eye-move {
  0% {
  transform: translate(-70%,-55%);
  }
  10% {
  transform: translate(-90%, -90%);
  }
  20% {
  transform: translate(-60%, -110%);
  }
  30% {
  transform: translate(-20%, -20%);
  }
  40% {
  transform: translate(-60%, -0%);
  }
  50% {
  transform: translate(-70%,-55%);
  }
}

Как можно заметить, что на таком простом дизайне присутствует красивая анимация.

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

Пользовательская страница ошибки 404 с грустным лицом

Адаптивное страница 404 на чистом css

HTML

Код
<div id="notfound">
  <div class="notfound">
  <div class="notfound-404">
  <h1>4<span></span>4</h1>
  </div>
  <h2>Oops! Страница не найдена</h2>
  <p>Извините, но страница, которую вы ищете, не существует, была удалена. имя изменено или временно недоступно</p>
  <a href="#">Вернуться на главную страницу</a>
  </div>
</div>

CSS

Код
#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.notfound .notfound-404 {
  height: 190px;
}

.notfound .notfound-404 h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 146px;
  font-weight: 700;
  margin: 0px;
  color: #232323;
}

.notfound .notfound-404 h1 > span {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/mozilla/36/pensive-face_1f614.png");
  background-size: cover;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  z-index: -1;
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.notfound h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #232323;
}

.notfound p {
  font-family: "Montserrat", sans-serif;
  color: #787878;
  font-weight: 300;
}

.notfound a {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  padding: 12px 30px;
  font-weight: 700;
  background-color: #f99827;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
  height: 115px;
  }
  .notfound .notfound-404 h1 {
  font-size: 86px;
  }
  .notfound .notfound-404 h1 > span {
  width: 86px;
  height: 86px;
  }
}

@keyframes floating {
  from {
  transform: scale(1.4) translate(0, 0);
  }

  50% {
  transform: scale(1.4) translate(0, 15px);
  }

  to {
  transform: scale(1.4) translate(0, 0);
  }
}

Оригинальный стиль дизайна, где отлично вписалась анимация.

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

Страница 404 в стилистике 3D под значение

Красивый стиль под Page 404

HTML

Код
<div class="section">
  <h1 class="error">404</h1>
  <div class="page">Ooops!!! Страница, которую вы ищете, не найдена</div>
  <a class="back-home" href="#!">Вернуться домой</a>
</div>

CSS

Код
html, body{
  margin: 0;
  padding: 0;
  text-align: center;
  font-family: sans-serif;
  background-color: #E7FFFF;
}

h1, a{
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.section{
  padding: 4rem 2rem;
}

.section .error{
  font-size: 150px;
  color: #008B62;
  text-shadow:  
  1px 1px 1px #00593E,  
  2px 2px 1px #00593E,
  3px 3px 1px #00593E,
  4px 4px 1px #00593E,
  5px 5px 1px #00593E,
  6px 6px 1px #00593E,
  7px 7px 1px #00593E,
  8px 8px 1px #00593E,
  25px 25px 8px rgba(0,0,0, 0.2);
}

.page{
  margin: 2rem 0;
  font-size: 20px;
  font-weight: 600;
  color: #444;
}

.back-home{
  display: inline-block;
  border: 2px solid #222;
  color: #222;
  text-transform: uppercase;
  font-weight: 600;
  padding: 0.75rem 1rem 0.6rem;
  transition: all 0.2s linear;
  box-shadow: 0 3px 8px rgba(0,0,0, 0.3);
}
.back-home:hover{
  background: #222;
  color: #ddd;
}

Аналогично другим страницам, эта также не сложная, где применено 3D под основные значение.

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

Анимационная 404 Ошибка страницы для сайта

Тематическая страница с красивой анимацией в 404 на сайт

HEAD

Код
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Arvo'>

HTML

Код
<section class="page_404">
  <div class="container">
  <div class="row">  
  <div class="col-sm-12 ">
  <div class="col-sm-10 col-sm-offset-1 text-center">
  <div class="four_zero_four_bg">
  <h1 class="text-center ">404</h1>
</div>
   
  <div class="contant_box_404">
  <h3 class="h2">
  Похоже ты потерян
  </h3>
   
  <p>страница, которую вы ищете, недоступна!</p>
   
  <a href="/" class="link_404">Go to Home</a>
  </div>
  </div>
  </div>
  </div>
  </div>
</section>

CSS

Код
.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.page_404 img{ width:100%;}

.four_zero_four_bg{
   
  background-image: url(http://zornet.ru/Abavaga/dribbble_1.gif);
  height: 400px;
  background-position: center;
  }
   
   
  .four_zero_four_bg h1{
  font-size:80px;
  }
   
  .four_zero_four_bg h3{
  font-size:80px;
  }
   
  .link_404{  
  color: #fff!important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;}
  .contant_box_404{ margin-top:-50px;}

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

Демонстрация
2020-03-19 Загрузок: 1 Просмотров: 239 Комментарий: (0)

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

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

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

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