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
- Оцените материал
- Опубликовано в Web design
- Прочитано 3371 раз

Комментарии