ZorNet.Ru — сайт для вебмастера » HTML и CSS » Огненный фон композиций на SVG + CSS

Огненный фон композиций на SVG + CSS

Вашему вниманию оригинально созданная инсталляция текста для фона, который создан при помощи SVG И CSS3, где от знаков летят по сторонам искры. Безусловно на любом сайте такая композиция будет оригинально смотреться, главное ее выставить по теме. Если брать светлый формат элементов сайта, то такую анимацию можно применить вместо стандартного фона, но только на отдельных страницах.

Также все можно по цветовой гамме самостоятельно поставить оттенки, так как можно заметить, что применены градиенты. Если вверх идет в темной палитре, то все ниже цветовая гамма приобретает более светлую палитру.

При веде такого формата, то сразу в голову приходит международный праздник 9 мая, что по всем отблескам подходит.

Приступаем к установке:

HTML

Код

CSS

Установка происходит на заданных страницах, где нужно поставить такой вид, где все делается после тега body:

Код

:root {
background-image:
radial-gradient(rgba(236, 41, 26,0.26) 0%,rgba(186, 33, 21,0) 50% ),
linear-gradient(#000000 40%, #6C2924, #FF7700 148%);
background-size: 750px 400vh, 100% 100%;
background-repeat: no-repeat, repeat;
background-position: 50% -130vh, 0% 0%;
width: 100vw;
height: 100vh;
font: 500 20px/20px 'Josefin Sans', sans-serif;
padding: 0;
margin: 0;
}

body {
width: 100vw;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background-image:
radial-gradient(
rgba(236, 41, 26,0.2) 0%,
rgba(186, 33, 21,0) 50% ),
radial-gradient(
rgba(236, 81, 66,0.2) 0%,
rgba(186, 33, 21,0) 50% ),
radial-gradient(
rgba(236, 141, 26,0.2) 0%,
rgba(186, 133, 21,0) 50% ),
radial-gradient(
rgba(236, 241, 26,0.2) 0%,
rgba(186, 33, 11,0) 50% ),
radial-gradient(
rgba(236, 171, 06,0.2) 0%,
rgba(186, 233, 21,0) 50% );
background-size: 60vw 4000px;
background-repeat: no-repeat;
background-position: 0vw -50vh, 20vw -20vh, 30vw -30vh, 70vw -50vh, 50vw -10vh;
background-blend-mode: exclusion;
animation: flickerBg 3s linear infinite alternate;
}
@keyframes flickerBg {
0% {
background-position:
-10vw -20vh, 20vw -30vh,
10vw -30vh, 70vw -50vh,
50vw -10vh;
}
50% {
background-position:
-5vw -70vh, 24vw -10vh,
10vw -90vh, 60vw -30vh,
50vw -60vh;
}
100% {
background-position:
-5vw -50vh, 20vw -80vh,
15vw -90vh, 65vw -80vh,
40vw -20vh;
}
}
svg {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  fill: rgb(243, 217, 170);
  stroke: #d87960;
  stroke-width: 0px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
  filter: drop-shadow(0px 0px 1px #BA2115);
  transform-style: preserve-3d;
}

.nortunatel1 {
display: block;
font: 700 15px/15px 'Josefin Sans', sans-serif;
transform: translate(20px, 50px);
}
.nortunatel2 {
display: block;
font: 700 15px/15px 'Josefin Sans', sans-serif;
transform: translate(38.1px, 61px);
}
.nortunatel3 {
display: block;
font: 300 5px/5px 'Josefin Sans', sans-serif;
transform: translate(44.5px, 67.15px);
fill: rgba(237, 212, 165,0.7);
}
.nortunatel4 {
display: block;
font: 300 5px/5px 'Josefin Sans', sans-serif;
transform: translate(20.4px, 50.2px) rotate(-90deg);
fill: rgba(237, 212, 165,0.5);
}
.nortunatel5 {
display: block;
font: 100 2px/2px 'Josefin Sans', sans-serif;
transform: translate(44.5px, 52.6px);
}
.nortunatel {
filter: url(#metallic);
}
.dusnodanumad {
position: absolute;
fill: url(#dusnodanumadgrad);
opacity: 0;
transform-origin: 50% 50%;
transform: translate(0px, 0px);
animation: floatUp 2400ms linear infinite forwards;
}
.sp1 {
animation-delay: 0ms;
}
.sp2 {
animation-delay: 410ms;
}
.sp3 {
animation-delay: 830ms;
}
.sp4 {
animation-delay: 1270ms;
}
.sp5 {
animation-delay: 620ms;
}
.dusnodanumad3 .sp1 {
animation-delay: 210ms;
}
.dusnodanumad3 .sp2 {
animation-delay: 1240ms;
}
.dusnodanumad3 .sp3 {
animation-delay: 1770ms;
}
.dusnodanumad3 .sp4 {
animation-delay: 620ms;
}
.dusnodanumad3 .sp5 {
animation-delay: 1510ms;
}

@keyframes floatUp {
0% {
transform: translate(0px, 0px)
rotate3d(0,0,0,0deg);
opacity: 1
}
5% {
transform: translate(5px, -10px)
rotate3d(2,4,1,40deg);
}
6% {
transform: translate(5px, -10px)
rotate3d(2,4,1,30deg);
opacity: 0.8;
}
30% {
transform: translate(0px, -50px)
rotate3d(2,8,1,-20deg)
scale(1.2);
opacity: 0.1;
}
49% {
transform: translate(-10px, -60px)
rotate3d(2,4,1,40deg);
opacity: 0;
}
50% {
transform: translate(0px, -60px)
rotate3d(2,4,1,-40deg);
opacity: 0;
}
90% {
transform: translate(5px, -70px)
rotate3d(2,4,0,40deg);
opacity: 0
}
100% {
transform: translate(5px, -70px)
rotate3d(2,4,0,40deg);
opacity: 0
}
}

На этом установка завершена.

Демонстрация
Источник: imapo.ru

13 Января 2019 Загрузок: 1 Просмотров: 1175 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0