02 Окт Анимация фона страницы с помощью SVG

Размещено в 19:20h in Вёрстка html, css, Фронтенд by

Анимация с помощью SVG

Цветная Анимация SVG как фон любой секции.

 

Анимация SVG с использованием языка синхронной мультимедийной интеграции (SMIL).

SMILпозволяет:

  • анимировать числовые атрибуты элемента (x, y, …).
  • анимированные атрибуты преобразования (перевод или вращение).
  • анимированные атрибуты цвета.
  • следовать траектории движения.

 

HTML:

<section class="main-bg"><section class="main-sec">
<h1 style="text-align: center;"><span style="color: #f7f7ff;">Анимация с помощью SVG</span></h1>
<p style="text-align: center;"><strong><span style="color: #f7f7ff;">Цветная <span style="text-decoration: underline;"><a style="color: #f7f7ff; text-decoration: underline;" href="https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_animation_with_SMIL" target="_blank" rel="noopener">Анимация SVG</a></span> как фон любой секции.</span></strong></p>

</section></section>

 

CSS:

.main-bg {
  background-color: #000;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIj8+PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MCIgaGVpZ2h0PSI1MCI+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjUwIi8+PHJlY3QgeD0iOCIgeT0iOCIgd2lkdGg9IjM0IiBoZWlnaHQ9IjM0Ij48YW5pbWF0ZSBpZD0iciIgYXR0cmlidXRlTmFtZT0iZmlsbCIgZHVyPSIxcyIgYmVnaW49IjBzO20uZW5kIiBmcm9tPSJyZWQiIHRvPSIjRkYwIi8+PGFuaW1hdGUgaWQ9InkiIGF0dHJpYnV0ZU5hbWU9ImZpbGwiIGR1cj0iMXMiIGJlZ2luPSJyLmVuZCIgZnJvbT0iI0ZGMCIgdG89IiMwRjAiLz48YW5pbWF0ZSBpZD0iZyIgYXR0cmlidXRlTmFtZT0iZmlsbCIgZHVyPSIxcyIgYmVnaW49InkuZW5kIiBmcm9tPSIjMEYwIiB0bz0iIzBGRiIvPjxhbmltYXRlIGlkPSJjIiBhdHRyaWJ1dGVOYW1lPSJmaWxsIiBkdXI9IjFzIiBiZWdpbj0iZy5lbmQiIGZyb209IiMwRkYiIHRvPSIjMDBGIi8+PGFuaW1hdGUgaWQ9ImIiIGF0dHJpYnV0ZU5hbWU9ImZpbGwiIGR1cj0iMXMiIGJlZ2luPSJjLmVuZCIgZnJvbT0iIzAwRiIgdG89IiNGMEYiLz48YW5pbWF0ZSBpZD0ibSIgYXR0cmlidXRlTmFtZT0iZmlsbCIgZHVyPSIxcyIgYmVnaW49ImIuZW5kIiBmcm9tPSIjRjBGIiB0bz0icmVkIi8+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIGZyb209IjAgMjUgMjUiIHRvPSI5MCAyNSAyNSIgZHVyPSIycyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiLz48L3JlY3Q+PGNpcmNsZSBjeD0iMjUiIGN5PSIyNSIgcj0iMTAiLz48L3N2Zz4=");
  background-position: center center;
  font: 20px/1 serif;
  min-height: 400px;
  width: 100%;
  position:relative;
}

.main-sec {
  background-color: rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 5px 5px #000;
  border-radius: 0.5em;
  color: #FFF;
  left: 50%;
  margin-left: -270px;
  padding: 1em;
  width: 540px;
  margin-top:50px;
  position:absolute;
}
Поделись, если оказалось полезно :)
Tags:
,
Нет комментариев

Написать