Як анімувати пунктирні межі з CSS
Оформлені межі можуть прикрашати будь-який елемент на сторінці, але межі CSS обмежені, коли мова йде про стиль. Розробники часто отримують рішення, такі як межі градієнта CSS, межі SVG, кілька кордонів і багато іншого для імітації та оновлення зовнішнього вигляду меж вікон і його анімацій.
Сьогодні ми розглянемо більш простий хак для пунктирних кордонів: анімація пунктирною межею. Анімований пунктирний кордон буде створено лише за допомогою контур і box-shadow, не залишаючи жодної суєти щодо зворотних зв'язків, оскільки контур підтримується з IE8. Таким чином, користувач все одно зможе бачити межі, на відміну від SVG або градієнта. При цьому ви також можете створювати двокольорові тире. Давайте подивимося.
Створення кордонів
Спочатку ми створимо кордони. Для цього скористаємося пунктирною схемою та тіньовою коробкою.
.банери контур: 6px пунктирний жовтий; box-shadow: 0 0 0 6px # EA3556;…
The контур знадобиться всі його цінності; ширина, тип і колір. The box-shadow потрібно лише значення для поширення яка повинна бути такою ж, як ширина контуру та її колір. Як контур, так і тінь разом, створюють ефект двоколірних тире.
Після цього можна налаштувати ширину або висоту вікна для бажаного вигляду кордону на кутах.
Анімація кордонів
Для нашого першого прикладу анімації ми додамо анімацію ключових кадрів CSS до набору банерів, а межі анімації безперервно, привертаючи увагу. Для ефекту анімації ми просто поміняємо кольори тіні контуру та вікна.
@keyframes animateBorder to outline-color: # EA3556; box-shadow: 0 0 0 жовтий;
Можна націлювати колір контуру, використовуючи контурний колір longhand властивість, однак для тіні вікна ви повинні дати всі значення для скороченого властивості на даний момент.
Після того, як анімація буде готова, додайте її до вікна.
.банери контур: 6px пунктирний жовтий; box-shadow: 0 0 0 6px # EA3556; анімація: 1s animateBorder infinite;…
Переходи на кордонах
Для прикладу переходу ми додамо межі для зображень і анімуємо їх на наведенні. Також можна змінити розмір кордону для різних ефектів.
.фотографій контур: 20px пунктиром # 006DB5; box-shadow: 0px 0px 0px 20px # 3CFDD3; перехід: всі 1s;… .photos: наведення контурний колір: # 3CFDD3; box-shadow: 0 0 0 20px # 006DB5;
Тепер наведіть курсор миші на ці зображення, щоб побачити ваші CSS межі у всій своїй анімованій славі.
І це - обгортка. Ви можете спробувати замінити пунктирні межі пунктирними, але ефект може бути не таким, як добре. Ви також можете змінити тип контуру під час анімації для декількох ефектів.
