Достаточно описать пару строк кода, что даст вам удивительный анимационный эффект, который будет на загляденье всем посетителям и поспособствует их активности на сайте. В этой статье рассмотрим 8 простых эффектов с использованием CSS3 свойства — Transition.

Подготовка
Все далее описанные анимационные эффекты выполнены на блоке DIV. Итак, для начала опишем базовые свойства для блока:

.experiment
{
    width:400px;
    height:200px;
    background:#676470;
    /* главное свойство */
    transition:all 0.3s ease;
}

Значение свойства Transition состоит и 3 составляющих: transition-property — all, transition-duration — 0.3s и третьей величины, transition-timing-function — ease, также есть еще одна составляющая.

Теперь переходим к эффектам.

1. Затемнение
Затемнение или осветление элементов на странице — довольно популярный способ обратить внимание посетителей на что-либо. Данный эффект кодируются в два этапа: во-первых, установить начальное состояние; Затем нужно задать изменение, например при наведении курсора:

.fade
{
    opacity:0.5;
}
.fade:hover
{
    opacity:1;
}

2. Смена цвета
Еще один из наиболее популярных эффектов — смена цвета элемента:

.color:hover
{
    background:#53a7ea;
}

3. Внутренняя граница
Один из самых часто используемых стилей для кнопок при наведении это появление границы кнопки. Мы можем, добавить рамку (border) к элементу, но это повлечет изменение размера элемента и как следствие положения — что не есть хорошо. Конечно, данную проблему можно решить, однако куда проще использовать тень внутри элемента.

.border:hover
{
    box-shadow: inset 0 0 0 20px #53a7ea;
}

4. Изменение формы
Еще одним из часто используемых эффектов является изменение формы элемента, например прямоугольник в овал и тд. С помощью CSS, выполнить это очень просто, достаточно описать класс для наведения и задать отличное от первоначального значение свойства border-radius.

.circle:hover
{
    border-radius:50%;
}

5. Увеличение и уменьшение
Переходим к более интересным эффектам. Чтобы увеличить элемент, нам придется изменить его ширину и высоту. В этом на поможет свойство CSS3 Transform.

.grow:hover
{
    -webkit-transform: scale(1.3);
    -ms-transform: scale(1.3);
    transform: scale(1.3);
}

Уменьшение элемента выполняется так же просто, как и увеличение. Чтобы увеличить элемент мы указываем значение больше 1, чтобы уменьшить его, мы указываем значение меньше 1:

.shrink:hover
{
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
}

6. Поворот
CSS3 Transform имеют целый ряд различных вариантов использования, один из лучших — поворот элемента:

.rotate:hover
{
    -webkit-transform: rotateZ(-30deg);
    -ms-transform: rotateZ(-30deg);
    transform: rotateZ(-30deg);
}

7. 3D тень
Не так давно стало популярно использовать в дизайне веб-сайтов 3D тени на ряду с Flat дизайном. Сам же эффект тени и выпуклости достигается за счет плавного смещения элемента по горизонтали и добавления тени. Примерно вот так:

.threed:hover
{
    box-shadow:
           1px 1px #53a7ea,
           2px 2px #53a7ea,
           3px 3px #53a7ea;
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
}

8. Колебание
На последок пожалуй самый сложный из представленных вариант реализации анимации с помощью CSS3. Будет выполнен целый комплекс действий над элементом, и все это благодаря правилу @keyframes, и свойствам animation и animation-iteration. Сначала описываем анимацию CSS свойств (используем для Chrome префикс -webkit):

@-webkit-keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
       transform: translateX(-5px);
    } 
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}
@keyframes swing
{
    15%
    {
        -webkit-transform: translateX(5px);
        transform: translateX(5px);
    }
    30%
    {
        -webkit-transform: translateX(-5px);
        transform: translateX(-5px);
    }
    50%
    {
        -webkit-transform: translateX(3px);
        transform: translateX(3px);
    }
    65%
    {
        -webkit-transform: translateX(-3px);
        transform: translateX(-3px);
    }
    80%
    {
        -webkit-transform: translateX(2px);
        transform: translateX(2px);
    }
    100%
    {
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
}

Эта анимация просто перемещает элемент влево и вправо:

.swing:hover
{
    -webkit-animation: swing 1s ease;
    animation: swing 1s ease;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

На этом всё. Конечно все выше представленные эффекты не полноценные (не готовы для рабочего применения), однако прекрасные для понимания того, что и с помощью CSS теперь можно выполнять над элементами веб-страницы различные действия для создания «живого сайта».

Добавлено: 01 Апреля 2018 19:10:34 Добавил: Андрей Ковальчук Нравится 0

Добавить