Weber Автор  мая 27, 2017

Создаем необычную анимированную 404 страницу.

В интернете можно найти множество примеров необычных 404-ых страниц. Я решил не создавать очередную статью на тему «50 прикольных примеров 404 страниц», а предлагаю вместе со мной сделать свою 404 страницу, но не простую, а анимированную.

HTML

<div class="box">
   <div class="cover_pan"></div>
</div>

В качестве фонового изображения для div с классом «box» используется полупрозрачный .png c текстом 404.

Создаем необычную анимированную 404 страницу

CSS код для "box":

.box {
background: url(img/404.png) no-repeat 0 0;
border-bottom: 5px solid #000;
height: 343px;
margin-bottom: 25px;
padding-bottom: 50px;
}

В качестве фонового изображения для div с классом «cover_pan» берете любое понравившееся вам изображение.

CSS код для "cover_pan":

.cover_pan{
background: #fff url(img/covers.jpg) repeat 1052px bottom;
height: 343px;
margin-left:1px;
overflow: hidden;
position: relative;
width:99.5%;
z-index: -1;
-moz-animation: pan 30s infinite linear; /*Firefox 5*/
-webkit-animation: pan 30s infinite linear; /*Safari, Chrome*/
}

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

Синтаксис -webkit-animation:

-webkit-animation: <имя анимации> <продолжительность> <количество циклов> <тип анимации>;

<Имя анимации> – название анимации, задаваемое пользователем. В нашем случае это pan.

<Продолжительность> – продолжительность одного цикла анимации. Можно указать в секундах (s) или в миллисекундах (ms). В нашем случае продолжительность цикла = 30 секундам.

<Количество циклов> количество раз, которое будет проигрываться анимация.

Возможные значения:

<число> анимация будет проигрываться определенное количество раз.

infinite анимация будет проигрываться бесконечно.

<Тип анимации> – возможно следующие варианты: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier (x1, y1, x2, y2)

И самое интересное создание keyframов (так называемых ключевых кадров):

Синтаксис @keyframes:

@keyframes <имя анимации> {
    <селектор кадра 1> {
    <свойство 1>:<значение 1>;
    <свойство 2>:<значение 1>;
    }
    <селектор кадра 2> {
    <свойство 1>:<значение 2>;
    <свойство 2>:<значение 2>;
    }
    .....................
    <селектор кадра n> {
    <свойство 1>:<значение n>;
    <свойство 2>:<значение n>;
    }
}

И наши ключевые кадры:

@-moz-keyframes pan {
0% { background-position: 1000px bottom; }
100% { background-position: left bottom; }
}
@-webkit-keyframes pan {
0% { background-position: 1000px bottom; }
100% { background-position: left bottom; }
}

0% { background-position: 1000px bottom; } задаем позицию фонового изображения в начале анимации.

100% { background-position: left bottom; } задаем позицию фонового изображения к концу анимации.

Вот так у нас получилась забавная 404 страница с анимацией.  Скачать пример можно во вложении.

DEMO

Добавить комментарий


Защитный код
Обновить

Top