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

Красивая анимация 404 страницы с помощью CSS

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

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

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

Так примерно будет выглядеть, если выставить другую гамму, но лучше посмотреть на demo странице ее красивую анимацию.

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

HTML

Код

CSS

Код

@import url('https://fonts.googleapis.com/css?family=Roboto:700');

:root {
  --color-main: #004880;
}

html, body, .gulomainus {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}

.gtunikaredc {
  position: relative;

  width: 750px;
  height: 400px;

  background-color: var(--color-main);
  background-image: linear-gradient(to left, #072e61, #004880);

  overflow: hidden;
}

.layer-0 {
  position: absolute;
  z-index: 10;
}
.layer-1 {
  position: absolute;
  z-index: 15;
}
.layer-2 {
  position: absolute;
  z-index: 20;
}

.shelf {
  position: absolute;
  top: 150px;
  left: 250px;
}
.shelf__side_left {
  position: absolute;
  top: 0;
  left: 0;

  width: 500px;
  height: 60px;

  background-color: #cdfffa;

  transform: skewY(-25deg);
}
.shelf__side_front {
  position: absolute;
  top: 137px;
  left: 0;

  width: 70px;
  height: 60px;

  background-color: #9dfbf3;
  background-image: linear-gradient(160deg, #84fff2, #2f7fb2);

  border: 1px solid rgba(47, 127, 178, 0.5);

  transform: skewY(30deg);
}
.shelf__side_bottom {
  position: absolute;
  top: 43px;
  left: 36px;

  width: 500px;
  height: 73px;

  background-color: #7adbd5;

  transform: skewY(-25deg) skewX(44deg);
}
.shelf__side_right {
  position: absolute;
  top: 42px;
  left: 70px;

  width: 500px;
  height: 60px;

  background-color: #0b2f6c;
  background-image: linear-gradient(0deg, #0b2f6c, #16598b);

  transform: skewY(-25deg);
}

.shelf__handle_top {
  position: absolute;
  top: 144px;
  left: 17px;

  width: 30px;
  height: 7px;

  background-color: #5ac8d3;

  transform: skewY(30deg) skewX(-50deg)
}
.shelf__handle_front {
  position: absolute;
  top: 149px;
  left: 13px;

  width: 30px;
  height: 10px;

  background-color: #71e7e4;
  border: 1px solid rgba(47, 127, 178, 0.5);

  transform: skewY(30deg);
}
.shelf__handle_right {
  position: absolute;
  top: 155px;
  left: 43px;

  width: 6px;
  height: 10px;

  background-color: #287caa;

  transform: skewY(-30deg);
}

.shadow {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;

  width: 150px;
  height: 100%;

  background-image: linear-gradient(to right, rgba(1, 20, 61, 0), rgba(1, 20, 61, 0.8) 65%, rgba(1, 20, 61, 1));
}

.kudansa {
  position: absolute;

  transform: translateY(0);
  transition: .3s transform ease-in;
}
.kudansa:hover {
  transform: translateY(-5px);
}
.kudansa_1 {
  top: -85px;
  right: -470px;
}
.kudansa_2 {
  top: -82px;
  right: -463px;
}
.kudansa_3 {
  top: -79px;
  right: -456px;
}
.kudansa_4 {
  top: -76px;
  right: -449px;
}
.kudansa_5 {
  top: -73px;
  right: -442px;
}
.kudansa_6 {
  top: -70px;
  right: -435px;
}
.kudansa_7 {
  top: -67px;
  right: -428px;
}
.kudansa_8 {
  top: -63px;
  right: -421px;
}
.kudansa_9 {
  top: -59px;
  right: -414px;
}
.kudansa_10 {
  top: -56px;
  right: -407px;
}
.kudansa_11 {
  top: -53px;
  right: -400px;
}
.kudansa_12 {
  top: -49px;
  right: -393px;
}
.kudansa_13 {
  top: -46px;
  right: -386px;
}
.kudansa_14 {
  top: -43px;
  right: -379px;
}
.kudansa_15 {
  top: -39px;
  right: -372px;
}
.kudansa_16 {
  top: -36px;
  right: -365px;
}
.kudansa_17 {
  top: -33px;
  right: -358px;
}
.kudansa_18 {
  top: -29px;
  right: -351px;
}
.kudansa_19 {
  top: -26px;
  right: -344px;
}
.kudansa_20 {
  top: -23px;
  right: -337px;
}
.kudansa_21 {
  top: -19px;
  right: -330px;
}
.kudansa_22 {
  top: -16px;
  right: -323px;
}
.kudansa_23 {
  top: -13px;
  right: -316px;
}
.kudansa_24 {
  top: -9px;
  right: -309px;
}
.kudansa_25 {
  top: -6px;
  right: -302px;
}
.kudansa_26 {
  top: -3px;
  right: -295px;
}
.kudansa_27 {
  top: 1px;
  right: -288px;
}
.kudansa_28 {
  top: 4px;
  right: -281px;
}
.kudansa_29 {
  top: 7px;
  right: -274px;
}
.kudansa_30 {
  top: 11px;
  right: -267px;
}
.kudansa_31 {
  top: 14px;
  right: -260px;
}
.kudansa_32 {
  top: 17px;
  right: -253px;
}
.kudansa_33 {
  top: 20px;
  right: -246px;
}
.kudansa_34 {
  top: 24px;
  right: -239px;
}
.kudansa_35 {
  top: 27px;
  right: -232px;
}
.kudansa_36 {
  top: 30px;
  right: -225px;
}
.kudansa_37 {
  top: 33px;
  right: -218px;
}
.kudansa_38 {
  top: 37px;
  right: -211px;
}
.kudansa_39 {
  top: 40px;
  right: -204px;
}
.kudansa_40 {
  top: 43px;
  right: -197px;
}
.kudansa_41 {
  top: 46px;
  right: -190px;
}
.kudansa_42 {
  top: 49px;
  right: -183px;
}
.kudansa_43 {
  top: 53px;
  right: -176px;
}
.kudansa_44 {
  top: 56px;
  right: -169px;
}
.kudansa_45 {
  top: 59px;
  right: -162px;
}
.kudansa_46 {
  top: 62px;
  right: -155px;
}
.kudansa_47 {
  top: 65px;
  right: -148px;
}

.kudansa__front {
  position: absolute;
  top: 3px;
  left: 0;

  width: 70px;
  height: 55px;

  background-color: #9d7f63;

  transform: skewY(25deg);
}
.kudansa__label {
  position: absolute;
  top: -12px;
  left: 5px;

  width: 10px;
  height: 7px;

  background-color: #9d7f63;

  transform: skewY(25deg);
}
.kudansa__label_left {
  top: -12px;
  left: 5px;
}
.kudansa__label_right {
  top: 12px;
  left: 55px;
}
.kudansa__top {
  position: absolute;
  top: 0;
  left: 2px;

  width: 70px;
  height: 4px;

  background-image: linear-gradient(to top, #e9eceb, #a3bab4 50%, #e9eceb);

  transform: skewY(25deg) skewX(-45deg);
}
.kudansa__right {
  position: absolute;
  top: 18px;
  left: 69px;

  width: 5px;
  height: 55px;

  background-image: linear-gradient(to left, #e9eceb, #a3bab4 50%, #e9eceb);

  transform: skewY(-25deg);
}
.kudansa__number {
  position: absolute;
  top: 41px;
  left: 10px;

  color: #7c664e;
  font-size: 8px;

  transform-origin: top left;
  transform: rotate(-66deg) skewY(-25deg);
}

.akopamub {
  position: absolute;
}
.akopamub__bottom {
  position: absolute;
  top: 60px;
  left: 5px;

  width: 135px;
  height: 120px;

  background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 30%, rgba(132, 255, 242, 0));

  transform: perspective(120px) rotateX(-20deg);
}
.akopamub__top {
  position: absolute;
  top: -25px;
  left: 7px;

  width: 130px;
  height: 180px;

  background-image: linear-gradient(to top, rgba(132, 255, 242, 1), rgba(132, 255, 242, 1) 20%, rgba(132, 255, 242, 0));

  transform: perspective(150px) rotateX(-20deg);
}

.akopamub__ball {
  position: absolute;
  top: 0;
  left: 0;

  width: 10px;
  height: 10px;

  border-radius: 10px;
  background-color: #83fff2;

  transform: translateY(160px);
}
.akopamub__ball_1 {
  animation: 5s fadeUp infinite;
  animation-delay: .5s;
}
.akopamub__ball_2 {
  left: 10px;

  width: 5px;
  height: 5px;

  animation: 4s fadeUp infinite;
  animation-delay: .8s;
}
.akopamub__ball_3 {
  left: 24px;

  width: 15px;
  height: 15px;

  animation: 9s fadeUp infinite;
  animation-delay: .65s;
}
.akopamub__ball_4 {
  left: 34px;

  width: 8px;
  height: 8px;

  animation: 7s fadeUp infinite;
  animation-delay: .5s;
}
.akopamub__ball_5 {
  left: 57px;

  width: 14px;
  height: 14px;

  animation: 7s fadeUp infinite;
  animation-delay: .9s;
}
.akopamub__ball_6 {
  left: 78px;

  width: 11px;
  height: 11px;

  animation: 3s fadeUp infinite;
  animation-delay: .3s;
}
.akopamub__ball_7 {
  left: 91px;

  width: 13px;
  height: 13px;

  animation: 8s fadeUp infinite;
  animation-delay: .77s;
}
.akopamub__ball_8 {
  left: 105px;

  width: 7px;
  height: 7px;

  animation: 6s fadeUp infinite;
  animation-delay: .4s;
}
.akopamub__ball_9 {
  left: 113px;

  width: 8px;
  height: 8px;

  animation: 4s fadeUp infinite;
  animation-delay: .6s;
}
.akopamub__ball_10 {
  left: 120px;

  width: 4px;
  height: 4px;

  animation: 9s fadeUp infinite;
  animation-delay: .92s;
}

.geralduka {
  position: absolute;
  top: 0;
  left: 122px;

  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 200px;

  display: flex;
}
.geralduka__item {
  margin: 0 10px;

  animation: 5s bounceUpDown infinite;
}
.geralduka__item_1 {
  animation-delay: .3s;
}
.geralduka__item_2 {
  animation: 5.4s bounceUpDown infinite;
  animation-delay: .5s;
}
.geralduka__item_3 {
  animation-delay: .3s;
}

@keyframes fadeUp {
  0% {
  transform: translateY(160px);
  opacity: 1;
  }
  60% {
  opacity: 1;
  }
  100% {
  transform: translateY(-10px);
  opacity: 0;
  }
}
@keyframes bounceUpDown {
  0, 100% {
  transform: translateY(0);
  }
  50% {
  transform: translateY(50px);
  }
}

@media screen and (max-width: 800px) {
  .gtunikaredc {
  transform: scale(0.8);
  }
}

@media screen and (max-width: 700px) {
  .gtunikaredc {
  transform: scale(0.7);
  }
}

@media screen and (max-width: 600px) {
  .gtunikaredc {
  transform: scale(0.6);
  }
}

@media screen and (max-width: 500px) {
  .gtunikaredc {
  transform: scale(0.5);
  }
}

@media screen and (max-width: 400px) {
  .gtunikaredc {
  transform: scale(0.4);
  }
}

@media screen and (max-width: 300px) {
  .gtunikaredc {
  transform: scale(0.3);
  }
}

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

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

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

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

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

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

Kosten

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