Анимированная пунктирная рамка CSS

Привет, всем. Как создать анимированную рамку для текста или картинки, используя только CSS. Рамки всегда являются украшением элементов веб - страницы и давайте посмотрим, как просто можно задать им анимацию.

Будем использовать свойства outline и box-shadow. Вместе они создадут эффект двухцветного пунктира.

Я приведу вам несколько примеров, но сотворить можно совершенно уникальный вариант. Чтобы просмотреть каждый из них, скопируйте любой из кодов и вставьте в этот редактор для просмотра.

Просто создаётся обычная пунктирная рамка CSS вокруг текста. Стиль рамки задается с помощью трех свойств: стиль, цвет и ширина. Как - то так

.ramka{
    outline: 6px dashed yellow;
    box-shadow: 0 0 0 6px #EA3556;
 
 }


Для outline нужно будет задать width, type и color. Для box-shadow нужно задать значение, которое должно быть таким же, как width и color для outline.

Создаём анимацию и добавляем его к общему коду.

@keyframes animateBorder {
  to {
    outline-color: #EA3556;
    box-shadow: 0 0 0 6px yellow;
  }
}

Сейчас несколько готовых вариантов анимации пунктирной рамки с кодами. Всё наглядно можно посмотреть на тестовом блоге по ссылке выше.

Вариант 1.  

<div class="animation-examples one">
Здесь ваш текст
  </div>

<style>
.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
}

.animation-examples.one {
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
  animation: 1s animateBorderone ease infinite;
}

@keyframes animateBorderone {
  to {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
}</style>

Вариант 2. Заменим свойство dashed на double, ширину рамки и тени.

<div class="animation-examples two">
Здесь ваш текст<br />
<br /></div>
<style>

.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
}

.animation-examples.two {
  color: #FA2A00;
  outline:12px double #F2D694;
  box-shadow: 0 0 0 8px #FA2A00;
  animation: 2s animateBorderTwo ease infinite;
}

@keyframes animateBorderTwo {
  to {
    outline-color: #FA2A00;
    box-shadow: 0 0 0 8px #F2D694;
  }
}</style>

Вариант 3. Можно сделать фон внутри блока или даже задать linear-gradient

<div class="animation-examples three">
Ваш текст</div>
<style>.animation-examples.three {
  color: #BEF202;
  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
  background-size: auto 2px;
  outline: 10px dashed #BEF202;
  box-shadow: 0 0 0 10px #1B676B;
  animation: 1s animateBorderThree ease infinite;
}

@keyframes animateBorderThree {
  to {
    outline-color: #1B676B;
    box-shadow: 0 0 0 10px #BEF202;
  }
}

#animation-examples{
  margin: 20px 10px;
}
</style>

Во всех вариантах цвет самого контура задаётся с помощью outline-color (outline: 6px dashed yellow;). А цвет тени в другом варианте box-shadow: 0 0 0 8px #FA2A00; При подборе цвета воспользуйтесь этой таблицей.

Вариант 4. Для изображений.

<div class="animation-photos one">
<img src="http://www.vashsad.ua/downloads/image/9832/Euphorbia4.jpg" alt="" />
  <br />
<br /></div>
<style>
.animation-photos {
  width: 400px;
  height: 280px;

}

.animation-photos.one {
  color: #69D2E7;
  outline: 10px dashed #CCCC00;
  box-shadow: 0 0 0 10px #FFFF00;
  animation: 1s animateBorderone ease infinite;
}

@keyframes animateBorderone {
  to {
    outline-color: #FFFF00;
    box-shadow: 0 0 0 10px #CCCC00;
  }
}</style>

Адрес картинки отмечен синим цветом. Ширина и высота изображения в примере  width: 400px; и  height: 280px;

В примерах был использован стиль рамки dashed. А вот во втором попробовала сделать double. Если есть желание поиграться ниже приведена таблица стилей.

Это более простое решение, чем использование CSS-градиентов для анимации рамки.

Идею подчерпнула здесь.

Сегодня у меня всё. Спасибо за внимание и до встречи.

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email