Как с помощью CSS анимировать пунктирную рамку. Девять простых примеров CSS3 анимации
Decorated borders can adorn any element on page, but CSS borders are limited when it comes to style. Developers frequently come up with solutions like , SVG borders , multiple borders and more to mimic and upgrade the looks of box borders and its animations.
Today we’ll look into a simpler hack for dashed borders: dashed border animation. The animated dashed border will be created using only outline and box-shadow , leaving no fuss about fallbacks, since outline is supported from IE8 onwards. That way the user will still be able to see the borders unlike when SVG or gradient is used. With this you can also create bicolored dashes. Let’s take a look.
Creating The Borders
We will first create the borders. For this, we’ll use a dashed outline and a box shadow.
Banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; ... }
The outline will need all of its values; width, type and color. The box-shadow only needs the value for spread which should be the same as the outline’s width and its color. Both the outline and the box-shadow together will create the effect of two-colored dashes.
You can then adjust the box’s width or height for your desired border look at the corners.
Animating The Borders
For our first animation example, we’ll add CSS keyframe animations to a set of banners with the borders animating continuosly, gaining attention. For the animation effect we’ll simply swap the colors of the outline and box shadow.
@keyframes animateBorder { to { outline-color: #EA3556; box-shadow: 0 0 0 6px yellow; } }
You can target the color of the outline using outline-color longhand property, however for box shadow you’ll have to give all the values to the shorthand property for now.
Once the animation is ready, add it to the box.
Banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; animation: 1s animateBorder infinite; ... }
Transitions On The Borders
For the transition example we’ll add borders to pictures and animate those on hover. You can also change the border size for different effects.
Photos{ outline: 20px dashed #006DB5; box-shadow: 0px 0px 0px 20px #3CFDD3; transition: all 1s; ... } .photos:hover{ outline-color: #3CFDD3; box-shadow: 0 0 0 20px #006DB5; }
Now, hover over these images to see your CSS dashed borders in all its animated glory.
And, that’s a wrap. You can try replacing dashed borders with dotted ones, but the effect might not be asas good. You can also change the outline type during animation for a few more effects.
| 18.02.2016
CSS3 открывает неограниченные возможности перед UI-дизайнерами, и главный плюс состоит в том, что практически любую идею можно легко реализовать и воплотить в жизнь, не прибегая к использованию JavaScript.
Удивительно, как простые вещи могут оживить обычную веб-страницу, сделать ее более доступной для восприятия пользователями. Речь идет о CSS3 переходах, с помощью которых можно позволять элементу трансформироваться и изменять стиль, например, при наведении курсора. Девять примеров CSS3 анимации, которые доступны ниже, помогут создать на сайте атмосферу отзывчивости, а также улучшить общий вид страницы благодаря красивым плавным переходам.
Для более детального ознакомления вы можете скачать архив с файлами.
Все эффекты работают с помощью свойства transition (англ. transition - «переход», «превращение») и псевдокласса:hover , который определяет стиль элемента при наведении на него курсора мыши ( в нашем учебнике). Для наших примеров мы использовали блок div размером 500×309 пикселей, исходный цвет фона #6d6d6d и длительность перехода от одного состояния к другому 0,3 секунды.
Body > div { width: 500px; height: 309px; background: #6d6d6d; -webkit-transition: all 0.3s ease;; -moz-transition: all 0.3s ease;; -o-transition: all 0.3s ease;; transition: all 0.3s ease; }
1. Изменение цвета при наведении курсора
Когда-то реализация такого эффекта была довольно кропотливой работой, с математическими вычислениями определенных значений RGB. Сейчас же достаточно записать стиль CSS, в котором необходимо добавить к селектору псевдокласс:hover и задать фоновый цвет, который плавно (за 0,3 секунды) заменит собой исходный цвет фона при наведении курсора на блок:
Color:hover { background:#53ea93; }
2. Появление рамки
Интересная и яркая трансформация - внутренняя рамка, плавно появляющаяся при наведении мыши. Хорошо подойдет для украшения различных кнопок. Чтобы добиться такого эффекта, используем псевдокласс:hover и свойство box-shadow с параметром inset (задает тень внутри элемента). Кроме этого, потребуется задать растяжение тени (в нашем случае это 23px) и её цвет:
Border:hover { box-shadow: inset 0 0 0 23px #53ea93; }
3. Свинг
Данная CSS анимация - исключение, т. к. здесь свойство transition не используется. Вместо него мы задействовали:
- @keyframes - базовую директиву для создания покадровой CSS-анимации, которая позволяет делать т. н. раскадровку и описывать анимацию в виде списка ключевых моментов;
- animation и animation-iteration-count - свойства для задания параметров анимации (длительность и скорость) и количества циклов (повторов). В нашем случае повтор 1.
4. Затухание
Эффект плавного затухания - это, по сути, обычное изменение прозрачности элемента. Анимация создается в два этапа: сначала необходимо установить первоначальное состояние прозрачности 1 - то есть полная непрозрачность, после чего указать её значение при наведении мыши - 0.6:
Fade { opacity: 1; } .fade:hover { opacity: 0.6; }
Для противоположного результата поменяйте значения местами:
5. Увеличение
Чтобы при наведении курсора блок увеличивался, мы воспользуемся свойством transform и зададим ему значение scale(1.2) . При этом блок увеличится на 20 процентов с сохранением своих пропорций:
Grow:hover { -webkit-transform: scale(1.2); -ms-transform: scale(1.2); transform: scale(1.2); }
6. Уменьшение
Уменьшить элемент так же просто, как и увеличить. Если в пятом пункте для увеличения масштаба нам необходимо было указать значение больше, чем 1, то для уменьшения блока мы просто укажем значение, которое будет меньше единицы, например, scale(0.7) . Теперь при наведении мыши блок будет пропорционально уменьшаться на 30 процентов от своего первоначального размера:
Shrink:hover { -webkit-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); }
7. Трансформация в круг
Одна из часто используемых анимаций - прямоугольный элемент, который при наведении курсора преобразовывается в окружность. С помощью свойства CSS border-radius , использованного в паре с:hover и transition , это можно реализовать без проблем:
Circle:hover { border-radius: 70%; }
8. Вращение
Забавный вариант анимации - поворот элемента на определенное количество градусов. Для этого нам снова понадобится свойство transform , но уже с другим значением - rotateZ(20deg) . При таких параметрах блок будет повернут на 20 градусов по часовой стрелке относительно оси Z:
Rotate:hover { -webkit-transform: rotateZ(20deg); -ms-transform: rotateZ(20deg); transform: rotateZ(20deg); }
9. 3D тень
Мнения дизайнеров расходятся в том, уместен ли данный эффект во флэт-дизайне. Тем не менее, эта CSS3 анимация является весьма оригинальной и также используется на веб-страницах. Добиваться трехмерного эффекта будем с помощью уже знакомых нам свойств box-shadow (создаст многослойную тень) и transform с параметром translateX(-7px) (обеспечит сдвиг блока по горизонтали влево на 7 пикселей):
Threed:hover { box-shadow: 1px 1px #53ea93, 2px 2px #53ea93, 3px 3px #53ea93, 4px 4px #53ea93, 5px 5px #53ea93, 6px 6px #53ea93, 7px 7px #53ea93; -webkit-transform: translateX(-7px); transform: translateX(-7px); }
Поддержка браузерами
На сегодняшний день свойство transition поддерживается следующими браузерами:
| Десктопные браузеры | |
|---|---|
| Internet Explorer | Поддерживается версией IE 10 и выше |
| Chrome | Поддерживается с версии 26 (до версии 25 работает с префиксом -webkit-) |
| Firefox | Поддерживается с версии 16 (в версиях 4-15 работает с префиксом -moz-) |
| Opera | Поддерживается с версии 12.1 |
| Safari | Поддерживается с версии 6.1 (в версиях 3.1-6 работает с префиксом -webkit-) |
Остальные свойства, использованные в данных примерах, такие как transform , box-shadow и т. д., также поддерживаются почти всеми современными браузерами. Однако, если вы собираетесь использовать эти идеи для своих проектов, настоятельно рекомендуем перепроверять кроссбраузерность.
Надеемся, что эти примеры CSS3 анимации были полезными для вас. Желаем творческих успехов!
Рамка CSS может украсить любой элемент на странице, но при назначении стилей свойство border имеет ряд ограничений.
Разработчикам приходилось расширять его возможности с помощью таких решений, как CSS-градиенты , SVG рамки и некоторых других, которые позволяют улучшить внешний вид рамок и их анимации.
В этой статье мы расскажем о более простом решении. Для создания анимированной пунктирной рамки мы будет использовать только outline и box-shadow , не утруждаясь созданием кроссбраузерного варианта, так как outline поддерживается IE8 и выше. Таким образом, пользователь все равно сможет увидеть рамку в отличие от решений, в которых бы мы использовали SVG или градиент. При этом также можно создать двухцветный пунктир. Давайте узнаем как.
Создание рамки
Сначала мы создадим CSS рамки вокруг текста. Для этого мы используем пунктирный контур и свойство box-shadow :
Banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; ... }
Для outline нужно будет задать width , type и color . Для box-shadow нужно задать только значение свойства spread , которое должно быть таким же, как width и color для outline . Вместе outline и box-shadow создадут эффект двухцветного пунктира.
Затем можно настроить ширину или высоту поля, чтобы получить в углах тот цвет, который нужен.
Анимация рамки
В первом примере мы используем ключевые кадры CSS , чтобы создать непрерывную, привлекающую внимание анимацию CSS двойной рамки. Для этого мы просто поменяем местами цвета контура и тени:
@keyframes animateBorder { to { outline-color: #EA3556; box-shadow: 0 0 0 6px yellow; } }
Цвет контура можно указать с помощью полного варианта свойства outline-color , в то время как для тени нужно задать значения в сокращённом формате свойства.
После того, как анимация будет готова, добавьте ее к блоку:
Banners{ outline: 6px dashed yellow; box-shadow: 0 0 0 6px #EA3556; animation: 1s animateBorder infinite; ... }
Посмотреть демо
Переходы для рамок
Для примера перехода мы добавим анимацию CSS рамки вокруг изображения, которая будет проигрываться при наведении курсора. Также можно изменить размер рамки для различных эффектов:
Photos{ outline: 20px dashed #006DB5; box-shadow: 0px 0px 0px 20px #3CFDD3; transition: all 1s; ... } .photos:hover{ outline-color: #3CFDD3; box-shadow: 0 0 0 20px #006DB5; }
Теперь наведите курсор мыши на эти изображения, чтобы увидеть анимированные пунктирные CSS рамки во всей своей красе.
Это в целом все. Вы можете попробовать заменить пунктир из черточек точечным пунктиром, но тогда эффект может выглядеть не так красиво. Также можно изменять тип контура во время анимации.
Перевод статьи «How to Animate a Dashed Border with CSS » был подготовлен дружной командой проекта .
Хорошо Плохо
Загрузка...
