Анимирана рамка на текст или изображение

Здравейте всички вие, които сте на страниците на blogzablogove.com. Как да създадете анимирана рамка на текст или изображение в публикация, използвайки само CSS?
Рамките винаги се използват за украсяване на елементите на уеб страниците. Но нека видим дали и колко е лесно да им създадем ефект на анимация. Ние ще използваме свойствата outline и box-shadow. Заедно те ще създадат ефект на двуцветна пунктирана линия. Ще ви дам няколко примера, но можете да създадете и напълно уникален вариант на този ефект.

1. С кое да започнем? Най-напред малко теория
2. Вариант първи
3. Вариант втори
4. Вариант трети 
5. Вариант четвърти – за изображение

С кое да започнем? Най-напред малко теория

➔Създава се обикновена пунктирана 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;
  }
}

А сега ето и няколко готови кодове на варианти за пунктирана рамка с анимация. Първите три варианта са за рамка около текст.

Вариант първи

<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>

Вариант втори

Заменяме свойството 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>

Вариант трети 

Можете да създадете фон в блока на рамката или даже да зададете 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;

За избор на цвят използвайте инструмента Таблица на цветовете.

Вариант четвърти – за изображение

<div class="animation-photos one">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVphH8TsS0HNdKO-DWOblbGrguaYy-1WYavPbatlE9i8bMvDfjc0PyiDN1pjkXVdT8jR3p0OsyfD5ansCfDBlOpiOZUeR9fjTAKMXlobJrB2Sg2Yf1JeIaVAJ6Jm2mV0h9doDh0WEi7Yc/w400-h280-p/podsnezhnik1.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). Ако имате желание да експериментирате с вида на рамката по-долу съм ви показала и таблицата със стилове.

За нагледност на посочените по-горе примери използвайте инструмента HTML редактор.
Препоръчвам да прочетете още по темата.
За днес това е всичко. Доскоро и успех .

идеята взех от shpargalochki.ru

Здраве за всички вас! Не забравяйте да правите добро на други хора!

Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога на: