Статьи, приемы, хитрости и Уроки по Photoshop, Illustrator, Web дизайну и кодингу.

8 замечательных эффектов перехода в CSS3

CSS3 представил бесчисленные возможности для разработчиков и самое интересное в том, что они просты в реализации.

Несколько строк кода дадут Вам удивительный эффект перехода, который вызовет удивление у Ваших пользователей. К тому же эти эффекты аппаратно ускорены и не будут тормозить сайт.

Вот 8 действительно простых эффектов которые добавят жизнь к Вашему сайту.

Что бы посмотреть как эти эффекты будут работать сделаем отдельные странички HTML:

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Сделав так, устанавливаем его ширину и высоту, цвет фона и его эффект перехода.

У эффекта перехода есть три значения: сам эффект, скорость перехода (в нашем случае 0.3 секунды) и третье значение ускорение и замедление (но мы будем придерживаться значения по умолчанию).

Теперь все, что мы должны сделать это изменить свойства, и проверить их в работе…

1. Fade in

Постепенное появление - довольно стандартный запрос от клиентов. Это - отличный способ подчеркнуть функциональность или привлечь внимание к призыву к действию.

Эффекты кодированы в 2 шага: во-первых Вы устанавливаете начальное состояние; затем, Вы устанавливаете изменение, например при наведении (hover):

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

(Удостоверьтесь, что Вы устанавили класс тега DIV “fade”, чтобы видеть эффект в работе.)

 

2. Изменение цвета

Анимация изменения цвета раньше была невероятно сложна со всеми видами математики, включая вычисление отдельных значений RGB и затем их переобъединение. Теперь, мы просто устанавливаем тег DIV “color” и определяем цвет который мы хотим в нашем CSS:

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

 

3. Увеличение и уменьшение

Чтобы увеличить элемент раньше использовали его ширину и высоту или его дополнение. Но теперь мы можем использовать CSS3s transform.

Установите класс тега DIV “grow” и затем добавьте этот код к css :

.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);
}

 

4. Поворот элемента

CSS эффекты имеют много различных применений и один из лучших - это вращение элемента. Дайте тегу DIV класс “rotate” и добавьте к CSS:

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

 

5. Из квадрата в круг

Действительно популярный эффект в данный момент - эффект перехода квадратного элемент в круглый, и наоборот. С CSS это просто достигнуть, мы просто используем свойство border-radius.

Дайте тегу DIV класс “circle” и добавьте в CSS:

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

 

6.3D тень

3D тени были забыты в течение приблизительно одного года, потому что они не были признаны как совместимые с плоским проектом (который является, конечно, ерундой) они работают фантастически хорошо.

Этот эффект достигнут, добавляя тень поля, и затем перемещая его на оси X, используя transform and translate свойства так, чтобы это казалось как буд-то элемент вырос из экрана.

Дайте Вашему тегу DIV класс “threed” и затем добавьте следующий код в CSS:

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

 

7. Дерганье

Не все элементы используют свойство перехода. Мы можем также создать очень сложные анимации, используя @keyframes, animation и animation-iteration.

В этом случае мы сначала определим анимацию CSS в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes вместо @keyframes

@-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;
}

 

8. Граница вставки

Один из самых горячих стилей кнопки сейчас - это фантомная кнопка; кнопка без фона и тяжелой границы. Мы можем, конечно, просто добавить границу к элементу, но это сменит положение элемента. Намного более простое решение - переход в границе, используя тень поля вставки.

Дайте Вашему тегу DIV класс “border” и добавьте в CSS:

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

источник WDD

Последнее изменениеПонедельник, 30 Июнь 2014 12:43
  • Оцените материал
    (0 голосов)
  • Опубликовано в Web design
  • Прочитано 3136 раз
SeRbGa

SeRbGa

мечтатель

Сайт: www.serbga.ru

Оставить комментарий

Комментарии  

SeRbGa
0 #2 SeRbGa 28.02.2016 10:40
Ну я же как то заставил на этой странице работать :-) значит вы делаете что то не так.
Андрей
0 #1 Андрей 28.02.2016 09:19
Здравствуйте. Вот сколько раз пробывал поставить такой код на сайт Джомлы, бесполезно, не работает. GSS код копировал в style.gss шаблона. а html код ставил в саму страницу где предполагалось вывести эффект.

You have no rights to post comments

Наверх

Популярные статьи

  • 1
  • 2
  • 3
  • 4

последние комментарии

ON-Line Блог SeRbGa.ru предоставляет самую свежую и актуальную информацию для веб-дизайнеров и разработчиков в виде тематических материалов, уроков созданных собственноручно, а так же переводов статей и новостей, полученных с зарубежных информационных ресурсов.

Копирование материалов сайта разрешено только с указанием активной индексируемой гиперссылки на данный сайт!

ДИСКЛЕЙМЕР/DISCLAIMER:

Я сам вдохновляюсь материалами, которые предлагаются вам на обозрение, будь то интересные руководства или полезные и впечатляющие подборки (дизайнов, шаблонов, макетов и т.д.), и по возможности всегда сохраняется ссылка на источники, и сообщается  автор изображений, использованных в подборках или руководствах. Зачастую, ссылка на источник не ведёт напрямую к автору шедевра, но если кто-то захочет использовать какие-либо изображения, графические элементы, исходники, которые здесь предоставлены, то единственное требование, выставленное к перепосту, заключается в сохранении ссылки на источник, а также соблюдение условий лицензионного соглашения (если таковое имеется). Если кто-то желает модифицировать тот или иной продукт, изменить его, подкорректировать, то ему придется самостоятельно искать настоящего автора материала.