Покачивающиеся пузыри на SVG и CSS3

Разместил: Apocalypse
28 сентября 2016

Очень интересный пример того, как можно средствами SVG + CSS3 организовать достаточно привлекательную страничку с анимированными "плавающими" пузырями Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.bubbles { height: 75vh; } .bubble { animation: soar 3s ease-in-out infinite; } .bubble:nth-child(1) { animation-delay: .85s; } .bubble:nth-child(2) { animation-delay: .7s; } .bubble:nth-child(3) { animation-delay: .55s; } .bubble:nth-child(4) { animation-delay: .4s; } .bubble:nth-child(5) { animation-delay: .25s; } .bubble:nth-child(6) { animation-delay: .1s; } .bubble:nth-child(7) { animation-delay: -.05s; } .bubble:nth-child(8) { animation-delay: -.2s; } .bubble:nth-child(9) { animation-delay: -.35s; } @keyframes soar { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }

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 40 41 42 43 44 45 46 47 48 49 50 51 52 53

.bubbles { height: 75vh; }   .bubble { animation: soar 3s ease-in-out infinite; }   .bubble:nth-child(1) { animation-delay: .85s; }   .bubble:nth-child(2) { animation-delay: .7s; }   .bubble:nth-child(3) { animation-delay: .55s; }   .bubble:nth-child(4) { animation-delay: .4s; }   .bubble:nth-child(5) { animation-delay: .25s; }   .bubble:nth-child(6) { animation-delay: .1s; }   .bubble:nth-child(7) { animation-delay: -.05s; }   .bubble:nth-child(8) { animation-delay: -.2s; }   .bubble:nth-child(9) { animation-delay: -.35s; }   @keyframes soar { 0%,100% { transform: translateY(0); }   50% { transform: translateY(-15px); } }

  2#: HTML код примера:

<svg class="bubbles" xmlns="http://www.w3.org/2000/svg" width="450" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 400.00001"> <defs> <linearGradient id="g"> <stop offset="0" stop-color="#e3fdff" stop-opacity=".784"/> <stop offset=".5" stop-color="#e3fdff" stop-opacity=".784"/> <stop offset="1" stop-color="#acfaff" stop-opacity=".784"/> </linearGradient> <linearGradient id="i"> <stop offset="0" stop-color="#fffad3" stop-opacity=".784"/> <stop offset=".5" stop-color="#fffad3" stop-opacity=".784"/> <stop offset="1" stop-color="#fff081" stop-opacity=".784"/> </linearGradient> <linearGradient id="h"> <stop offset="0" stop-color="#ffd7d3" stop-opacity=".784"/> <stop offset=".5" stop-color="#ffd7d3" stop-opacity=".784"/> <stop offset="1" stop-color="#ff9f94" stop-opacity=".784"/> </linearGradient> <linearGradient id="e"> <stop offset="0" stop-color="#ffe8d3" stop-opacity=".784"/> <stop offset=".5" stop-color="#ffe8d3" stop-opacity=".784"/> <stop offset="1" stop-color="#ffc28b" stop-opacity=".784"/> </linearGradient> <linearGradient id="d"> <stop offset="0" stop-color="#c7fbe6" stop-opacity=".784"/> <stop offset=".5" stop-color="#c7fbe6" stop-opacity=".784"/> <stop offset="1" stop-color="#43f6ac" stop-opacity=".784"/> </linearGradient> <linearGradient id="c"> <stop offset="0" stop-color="#d3fcff" stop-opacity=".784"/> <stop offset=".5" stop-color="#d3fcff" stop-opacity=".784"/> <stop offset="1" stop-color="#75f7ff" stop-opacity=".784"/> </linearGradient> <linearGradient id="a"> <stop offset="0" stop-color="#bfddff" stop-opacity=".784"/> <stop offset=".5" stop-color="#bfddff" stop-opacity=".784"/> <stop offset="1" stop-color="#60abff" stop-opacity=".784"/> </linearGradient> <linearGradient id="b"> <stop offset="0" stop-color="#e0d9fd" stop-opacity=".784"/> <stop offset=".5" stop-color="#e0d9fd" stop-opacity=".784"/> <stop offset="1" stop-color="#b9a9fb" stop-opacity=".784"/> </linearGradient> <linearGradient id="f"> <stop offset="0" stop-color="#ebf7ff" stop-opacity=".784"/> <stop offset=".5" stop-color="#ebf7ff" stop-opacity=".784"/> <stop offset="1" stop-color="#afdeff" stop-opacity=".784"/> </linearGradient> <radialGradient id="r" cx="120.609" cy="745.077" r="100" xlink:href="#a" fx="120.609" fy="745.077" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.45255 0 0 1.45255 50.674 -151.11)"/> <radialGradient id="n" cx="120.609" cy="745.077" r="100" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(-40.483 108.745) scale(1.0894)" fx="120.609" fy="745.077"/> <radialGradient id="q" cx="120.609" cy="745.077" r="100" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.27098 0 0 1.27098 227.77 -26.133)" fx="120.609" fy="745.077"/> <radialGradient id="p" cx="120.609" cy="745.077" r="100" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.90784 0 0 .90784 36.462 170.084)" fx="120.609" fy="745.077"/> <radialGradient id="o" cx="120.609" cy="745.077" r="100" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72627 0 0 .72627 208.47 297.89)" fx="120.609" fy="745.077"/> <radialGradient id="l" cx="120.609" cy="745.077" r="100" xlink:href="#f" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.5447 0 0 .5447 150.832 363.472)" fx="120.609" fy="745.077"/> <radialGradient id="k" cx="120.609" cy="745.077" r="100" xlink:href="#g" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.36314 0 0 .36314 114.034 443.61)" fx="120.609" fy="745.077"/> <radialGradient id="j" cx="120.609" cy="745.077" r="100" xlink:href="#h" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.18157 0 0 .18157 161.544 546.375)" fx="120.609" fy="745.077"/> <radialGradient id="m" cx="120.609" cy="745.077" r="100" xlink:href="#i" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.47208 0 0 .47208 198.37 381.633)" fx="120.609" fy="745.077"/> </defs> <g transform="translate(0 -652.362)"> <circle class="bubble" cx="180.791" cy="684.309" r="12.5" fill="url(#j)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="152.528" cy="719.478" r="25" fill="url(#k)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="208.573" cy="777.274" r="37.5" fill="url(#l)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="248.414" cy="740.262" r="32.5" fill="url(#m)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="75" cy="936.35" r="75" fill="url(#n)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="285.459" cy="849.627" r="50" fill="url(#o)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="132.698" cy="859.755" r="62.5" fill="url(#p)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="362.5" cy="939.406" r="87.5" fill="url(#q)" style="isolation:auto;mix-blend-mode:normal"/> <g class="bubble"> <circle cx="204.652" cy="952.362" r="100" fill="url(#r)" style="isolation:auto;mix-blend-mode:normal"/> <rect width="13" height="26" x="190" y="903.362" fill="#384960" fill-opacity=".665" style="isolation:auto;mix-blend-mode:normal" ry="6.5"/> <rect width="13" height="26" x="233" y="903.362" fill="#384960" fill-opacity=".665" ry="6.5" style="isolation:auto;mix-blend-mode:normal"/> <path fill="none" stroke="#384960" stroke-opacity=".667" stroke-width="7.017" d="M199.06 946.703c.418 7.41 9.136 13.74 19.523 13.517 10.23-.227 18.36-6.212 18.36-13.517" style="isolation:auto;mix-blend-mode:normal" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </svg>

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 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74

<svg class="bubbles" xmlns="http://www.w3.org/2000/svg" width="450" height="400" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 450 400.00001"> <defs> <linearGradient id="g"> <stop offset="0" stop-color="#e3fdff" stop-opacity=".784"/> <stop offset=".5" stop-color="#e3fdff" stop-opacity=".784"/> <stop offset="1" stop-color="#acfaff" stop-opacity=".784"/> </linearGradient> <linearGradient id="i"> <stop offset="0" stop-color="#fffad3" stop-opacity=".784"/> <stop offset=".5" stop-color="#fffad3" stop-opacity=".784"/> <stop offset="1" stop-color="#fff081" stop-opacity=".784"/> </linearGradient> <linearGradient id="h"> <stop offset="0" stop-color="#ffd7d3" stop-opacity=".784"/> <stop offset=".5" stop-color="#ffd7d3" stop-opacity=".784"/> <stop offset="1" stop-color="#ff9f94" stop-opacity=".784"/> </linearGradient> <linearGradient id="e"> <stop offset="0" stop-color="#ffe8d3" stop-opacity=".784"/> <stop offset=".5" stop-color="#ffe8d3" stop-opacity=".784"/> <stop offset="1" stop-color="#ffc28b" stop-opacity=".784"/> </linearGradient> <linearGradient id="d"> <stop offset="0" stop-color="#c7fbe6" stop-opacity=".784"/> <stop offset=".5" stop-color="#c7fbe6" stop-opacity=".784"/> <stop offset="1" stop-color="#43f6ac" stop-opacity=".784"/> </linearGradient> <linearGradient id="c"> <stop offset="0" stop-color="#d3fcff" stop-opacity=".784"/> <stop offset=".5" stop-color="#d3fcff" stop-opacity=".784"/> <stop offset="1" stop-color="#75f7ff" stop-opacity=".784"/> </linearGradient> <linearGradient id="a"> <stop offset="0" stop-color="#bfddff" stop-opacity=".784"/> <stop offset=".5" stop-color="#bfddff" stop-opacity=".784"/> <stop offset="1" stop-color="#60abff" stop-opacity=".784"/> </linearGradient> <linearGradient id="b"> <stop offset="0" stop-color="#e0d9fd" stop-opacity=".784"/> <stop offset=".5" stop-color="#e0d9fd" stop-opacity=".784"/> <stop offset="1" stop-color="#b9a9fb" stop-opacity=".784"/> </linearGradient> <linearGradient id="f"> <stop offset="0" stop-color="#ebf7ff" stop-opacity=".784"/> <stop offset=".5" stop-color="#ebf7ff" stop-opacity=".784"/> <stop offset="1" stop-color="#afdeff" stop-opacity=".784"/> </linearGradient> <radialGradient id="r" cx="120.609" cy="745.077" r="100" xlink:href="#a" fx="120.609" fy="745.077" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.45255 0 0 1.45255 50.674 -151.11)"/> <radialGradient id="n" cx="120.609" cy="745.077" r="100" xlink:href="#b" gradientUnits="userSpaceOnUse" gradientTransform="translate(-40.483 108.745) scale(1.0894)" fx="120.609" fy="745.077"/> <radialGradient id="q" cx="120.609" cy="745.077" r="100" xlink:href="#c" gradientUnits="userSpaceOnUse" gradientTransform="matrix(1.27098 0 0 1.27098 227.77 -26.133)" fx="120.609" fy="745.077"/> <radialGradient id="p" cx="120.609" cy="745.077" r="100" xlink:href="#d" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.90784 0 0 .90784 36.462 170.084)" fx="120.609" fy="745.077"/> <radialGradient id="o" cx="120.609" cy="745.077" r="100" xlink:href="#e" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.72627 0 0 .72627 208.47 297.89)" fx="120.609" fy="745.077"/> <radialGradient id="l" cx="120.609" cy="745.077" r="100" xlink:href="#f" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.5447 0 0 .5447 150.832 363.472)" fx="120.609" fy="745.077"/> <radialGradient id="k" cx="120.609" cy="745.077" r="100" xlink:href="#g" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.36314 0 0 .36314 114.034 443.61)" fx="120.609" fy="745.077"/> <radialGradient id="j" cx="120.609" cy="745.077" r="100" xlink:href="#h" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.18157 0 0 .18157 161.544 546.375)" fx="120.609" fy="745.077"/> <radialGradient id="m" cx="120.609" cy="745.077" r="100" xlink:href="#i" gradientUnits="userSpaceOnUse" gradientTransform="matrix(.47208 0 0 .47208 198.37 381.633)" fx="120.609" fy="745.077"/> </defs> <g transform="translate(0 -652.362)"> <circle class="bubble" cx="180.791" cy="684.309" r="12.5" fill="url(#j)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="152.528" cy="719.478" r="25" fill="url(#k)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="208.573" cy="777.274" r="37.5" fill="url(#l)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="248.414" cy="740.262" r="32.5" fill="url(#m)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="75" cy="936.35" r="75" fill="url(#n)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="285.459" cy="849.627" r="50" fill="url(#o)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="132.698" cy="859.755" r="62.5" fill="url(#p)" style="isolation:auto;mix-blend-mode:normal"/> <circle class="bubble" cx="362.5" cy="939.406" r="87.5" fill="url(#q)" style="isolation:auto;mix-blend-mode:normal"/> <g class="bubble"> <circle cx="204.652" cy="952.362" r="100" fill="url(#r)" style="isolation:auto;mix-blend-mode:normal"/> <rect width="13" height="26" x="190" y="903.362" fill="#384960" fill-opacity=".665" style="isolation:auto;mix-blend-mode:normal" ry="6.5"/> <rect width="13" height="26" x="233" y="903.362" fill="#384960" fill-opacity=".665" ry="6.5" style="isolation:auto;mix-blend-mode:normal"/> <path fill="none" stroke="#384960" stroke-opacity=".667" stroke-width="7.017" d="M199.06 946.703c.418 7.41 9.136 13.74 19.523 13.517 10.23-.227 18.36-6.212 18.36-13.517" style="isolation:auto;mix-blend-mode:normal" stroke-linecap="round" stroke-linejoin="round"/> </g> </g> </svg>

Автор публикации

не в сети 4 дня

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: BubblesCSS3SVGПлавающиеПокачивающиесяПузыри

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Неоновые пузыри, плавающие по экрану на HTML5 Canvas
• Предыдущая публикация Ловим позицию курсора в текстовых полях на jQuery

Вам может также понравиться...

• Интерактивные 3D карточки, которые наклоняются вслед за курсором на CSS3 и jQuery

  Разместил: Apocalypse 13 января 2023

  - Apocalypse 13 января 2023 Last modified 14 января 2023

• 3D эффекты прокрутки выпадающих списков на CSS3 и SCROLL.JS

  Разместил: Apocalypse 3 июля 2016

  - Apocalypse 3 июля 2016

• Анимированные новогодние гирлянды на CSS3

  Разместил: Apocalypse 2 ноября 2017

  - Apocalypse 2 ноября 2017 Last modified 2 сентября 2018

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

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

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии