Анимация фона текста (SVG и CSS3)

В этой статье я поделюсь с вами двумя эффектами, которые я получил, когда я играл с SVG и CSS3 анимациями. Мы создадим 2 анимированных фона для текста , первый пример, текст с радужным цветом фона анимированные при наведении. И второй пример, в котором текст будет иметь постоянно анимированный фон  (диско-эффект).

Идея проста, мы создадим Div с анимированным фоном, используя CSS3 сделаем фоновый рисунок и применим CSS3 анимацию. Затем, внутри этой Div мы размещаем объект SVG, содержащий текст-маску.

В конечном итоге, анимация фона будет видна в только пределах текста.

1 пример (эффект радуги при наведении ):

Html разметка:

<div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="15" y="65" id="theText" fill="#000">Welcome to Codicode</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>

Объект SVG состоит из прямоугольника, к которому мы будем применять маску (theMask), содержащий два объекта: прямоугольник и наш отображаемый текст. Чтобы изменить цвет фона достаточно изменить основной цвет заливки.

Обратите внимание, что объект SVG будет заполнять весь размер DIV,  потому, что мы должны скрыть всю фоновую графику и анимацию CSS3.

CSS верстка:

/* by Chtiwi Malek */
/* http://www.codicode.com */
body
{
  background-color:#fff;
}

#bkDiv
{
  cursor:pointer;
  margin:0px auto 0px auto;
  background: linear-gradient(0deg, transparent 0%, #31009c 10%, #000084 25%,#009cff 37%,#00bd00 50%,#fff700 62%,#ff6331 75%,#de0000 90%,transparent 100%);
  background-color: #333;
  background-size: 10px 125px;
  background-repeat:repeat;
  height:100px;
  width:650px;
  
  background-position:center -65px;
  transition: background-position 1s;
}
#bkDiv:hover
{
  background-position:center 0px;
}
#theText
{
  font-family:Impact, Charcoal, sans-serif;
  font-size:65px;
  stroke:#000;
  stroke-width:3px;
  fill-opacity:0.5;
}

Если на DIV наведён указатель мыши, CSS3 фон сместится, и вернётся в первоначальную позицию после того, как указатель уберут. Продолжительность перехода здесь установлена в 1 секунду.
Также текст содержит 50% прозрачности и 3px подложку (100% непрозрачна), чтобы получить эффект контура.

Пример 2 (Disco-эффект):

Html разметка:

<div id="bkDiv">
  <svg width="100%" height="100%">
    <defs>
      <mask id="theMask">
        <rect width="100%" height="100%" fill="#fff" />
        <text x="20" y="120" id="theText" fill="#000">Night CLUB</text>
      </mask>
    </defs>
    <rect width="100%" height="100%" mask="url(#theMask)" fill="#fff" />
  </svg>
</div>

HTML разметка точно такая же, как и в первом примере.

CSS верстка:

/* by Chtiwi Malek */
/* http://www.codicode.com */
body
{
  background-color:#fff;
}
#bkDiv
{
  margin:-2px auto 0px auto;
  background: linear-gradient(-45deg, #036 30%,transparent 45%,transparent 55%,#036 70%), linear-gradient(45deg, #036 30%,transparent 45%,transparent 55%,#036 70%);
  background-color: #f00;
  background-size: 15px 15px;
  background-position:0px 0px;
  height:100%;
  width:580px;
  
  animation: cAnim 1s linear 0s infinite;
}

@keyframes cAnim
{
  100% {background-position:15px 0px;}
}

#theText
{
  font-family:Impact, Charcoal, sans-serif;
  font-size:120px;
  stroke:#000;
  stroke-width:5px;
  fill-opacity:0.1;
  stroke-opacity:1;
  animation: cAnim1 0.5s linear 0s infinite;
}
@keyframes cAnim1
{
  100% {fill-opacity:0.9;stroke-opacity:0.5;}
}

В этом примере одновременно две анимации , первая: красные движущиеся точки, применяется к фону DIV, и вторая: вспышки света, применяется к тексту SVG маски.

SVG (Scalable Vector Graphics) является открытым стандартом технологии HTML, разработанный World Wide Web Consortium (W3C) для создания и рендеринга веб-страниц и поддерживается всеми текущими версиями всех основных браузеров. И даже если это не так широко используется, как это должно быть, это набирает обороты с каждым днем.

Оригинал / Перевод