» »

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

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

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

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

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

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

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

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

HTML

Код
<div class="gulomainus">
  <div class="gtunikaredc">
  <div class="layer-0 shelf">
  <div class="shelf__side_left"></div>
  <div class="shelf__side_bottom"></div>
   
  <div class="kudansa kudansa_1">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_2">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_3">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_4">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_5">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_6">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_7">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_8">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_9">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_10">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_11">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_12">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_13">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_14">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_15">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_16">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_17">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_18">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_19">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_20">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_21">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_22">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_23">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_24">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_25">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_26">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_27">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_28">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_29">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_30">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_31">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_32">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_33">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_34">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_35">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_36">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_37">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_38">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_39">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_40">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_41">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_42">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_43">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_44">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_45">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_46">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_right"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
  <div class="kudansa kudansa_47">
  <div class="kudansa__front"></div>
  <div class="kudansa__top"></div>
  <div class="kudansa__label kudansa__label_left"></div>
  <div class="kudansa__right"></div>
  <div class="kudansa__number">
  №2428506
  </div>
  </div>
   
  <div class="akopamub">
  <div class="akopamub__bottom"></div>
  <div class="akopamub__top"></div>
  <div class="akopamub__ball akopamub__ball_1"></div>
  <div class="akopamub__ball akopamub__ball_2"></div>
  <div class="akopamub__ball akopamub__ball_3"></div>
  <div class="akopamub__ball akopamub__ball_4"></div>
  <div class="akopamub__ball akopamub__ball_5"></div>
  <div class="akopamub__ball akopamub__ball_6"></div>
  <div class="akopamub__ball akopamub__ball_7"></div>
  <div class="akopamub__ball akopamub__ball_8"></div>
  <div class="akopamub__ball akopamub__ball_9"></div>
  <div class="akopamub__ball akopamub__ball_10"></div>
   
  </div>
   
  <div class="shelf__side_front"></div>
  <div class="shelf__side_right"></div>
   
  <div class="shelf__handle_top"></div>
  <div class="shelf__handle_front"></div>
  <div class="shelf__handle_right"></div>
  </div>
  <div class="layer-1 shadow"></div>
  <div class="layer-2 geralduka">
  <div class="geralduka__item geralduka__item_1">4</div>
  <div class="geralduka__item geralduka__item_2">0</div>
  <div class="geralduka__item geralduka__item_3">4</div>
  </div>
  </div>
</div>

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.10.2018 Просмотров: 162 Комментарий: (0)

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

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

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