Разноцветный анимированный фон на SVG
Классный анимированный фон для вашего сайта. Всё работает на чистом SVG
Для начала посмотрите ДЕМО
Установка:
1#: После открывающего тега <body> поместите:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<svg viewBox="0 0 100 100" preserveAspectRatio="xMidYMid slice"> <defs> <radialGradient id="Gradient1" cx="50%" cy="50%" fx="10%" fy="50%" r=".5"> <animate attributeName="fx" dur="34s" values="0%;3%;0%" repeatCount="indefinite" /> <stop offset="0%" stop-color="#ff0" /> <stop offset="100%" stop-color="#ff00" /> </radialGradient> <radialGradient id="Gradient2" cx="50%" cy="50%" fx="10%" fy="50%" r=".5"> <animate attributeName="fx" dur="23.5s" values="0%;3%;0%" repeatCount="indefinite" /> <stop offset="0%" stop-color="#0ff" /> <stop offset="100%" stop-color="#0ff0" /> </radialGradient> <radialGradient id="Gradient3" cx="50%" cy="50%" fx="50%" fy="50%" r=".5"> <animate attributeName="fx" dur="21.5s" values="0%;3%;0%" repeatCount="indefinite" /> <stop offset="0%" stop-color="#f0f" /> <stop offset="100%" stop-color="#f0f0" /> </radialGradient> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient1)"> <animate attributeName="x" dur="20s" values="25%;0%;25%" repeatCount="indefinite" /> <animate attributeName="y" dur="21s" values="0%;25%;0%" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="17s" repeatCount="indefinite"/> </rect> <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient2)"> <animate attributeName="x" dur="23s" values="-25%;0%;-25%" repeatCount="indefinite" /> <animate attributeName="y" dur="24s" values="0%;50%;0%" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="rotate" from="0 50 50" to="360 50 50" dur="18s" repeatCount="indefinite"/> </rect> <rect x="0" y="0" width="100%" height="100%" fill="url(#Gradient3)"> <animate attributeName="x" dur="25s" values="0%;25%;0%" repeatCount="indefinite" /> <animate attributeName="y" dur="26s" values="0%;25%;0%" repeatCount="indefinite" /> <animateTransform attributeName="transform" type="rotate" from="360 50 50" to="0 50 50" dur="19s" repeatCount="indefinite"/> </rect> </svg> <div class="child"> Веяния <br/> перемен </div> |
2#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
.child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); letter-spacing: -5px; mix-blend-mode: overlay; text-shadow: 0 0 5px #fff; color: #fff6; } svg { position: absolute; top: 0; width:100%; height: 100%; z-index: 0; } |
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
