23

Как сделать баннер с капающем краном.

У меня есть изображение капающего крана

введите сюда описание изображения

Сценарий анимации

  1. Водопроводный кран, из которого тянется и падает капелька воды.
  2. Цикл повторяется несколько раз
  3. Кран медленно исчезает
  4. Появляется надпись: Из капающего крана, за сутки убегает 10 вёдер воды.
  5. Не хотите платить лишние деньги за ЖКХ, позвоните нам.
  6. Номер телефона сантехника
  7. Переход к первому пункту анимации

Вот так, по списку, должны идти этапы анимации, далее зацикливание,- переход к первому пункту.

Update 21.12.2018

Добавляю несколько векторных изображений водопроводных кранов. Делаю это по запросу в комментариях.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 1222.9 1649.7" enable-background="new 0 0 1222.852 1649.688" xml:space="preserve"><path d="M799.6 1608.7c129.9 0 259.8-0.2 389.7 0.1 0 3.7-0.1 7.4-0.1 11.1 -129.9 0.1-259.7 0-389.6 0C799.5 1616.2 799.5 1612.5 799.6 1608.7z"/><path d="M799.5 1583.7c49.6-0.2 362.1-0.2 389.8 0 0 3.8-0.1 7.5-0.1 11.3 -129.9-0.2-259.8-0.2-389.6 0C799.5 1591.2 799.5 1587.4 799.5 1583.7z"/><path d="M799.6 1533.5c129.9 0.1 259.7 0.1 389.6 0 0 3.8 0.1 7.5 0.1 11.3 -56.5 0.3-365.3 0.2-389.8 0C799.5 1541 799.5 1537.2 799.6 1533.5z"/><path d="M799.4 1558.7c50.3-0.2 376-0.6 390 0.1 -0.2 3.7-0.2 7.4 0 11.1 -56.4 0.4-362 0.3-390 0C799.5 1566.1 799.5 1562.4 799.4 1558.7z"/><path d="M1189.3 1608.8c-129.9-0.3-259.8-0.1-389.7-0.1 -0.1 3.7-0.1 7.5 0 11.3 129.9 0 259.7 0.1 389.6 0C1189.2 1616.2 1189.3 1612.5 1189.3 1608.8zM795 1604.1c50.6-0.4 366.2-0.3 398.9 0 0.3 6.9 0.2 13.7 0.1 20.6 -51 0.3-374 0.2-399 0.1C794.8 1617.8 794.8 1610.9 795 1604.1z"/><path d="M1193.9 1574.6c-132.9 0-265.8 0.2-398.8-0.1 -0.4-6.8-0.3-13.7 0-20.5 133 0 265.9 0 398.9 0C1194.2 1560.9 1194.3 1567.8 1193.9 1574.6zM799.4 1558.7c0.1 3.7 0.1 7.4 0 11.1 28.7 0.3 335 0.4 390 0 -0.1-3.7-0.1-7.4 0-11.1C1175.3 1558.1 850.3 1558.4 799.4 1558.7z"/><path d="M799.6 1595c129.9-0.2 259.8-0.2 389.6 0 0-3.8 0-7.5 0.1-11.3 -27.5-0.2-339.8-0.2-389.8 0C799.5 1587.4 799.5 1591.2 799.6 1595zM1194 1599.7c-133 0.2-265.9 0.2-398.9 0 -0.1-7-0.5-14 0.3-20.9 132.8 0.1 265.6 0.1 398.5 0C1194.4 1585.7 1194.2 1592.7 1194 1599.7z"/><path d="M795 1529c133-0.1 266-0.1 399 0 0.1 6.8 0.1 13.6-0.1 20.5 -50.1 0.3-367 0.3-398.9 0C794.8 1542.7 794.9 1535.8 795 1529zM799.5 1544.8c25.9 0.2 333.9 0.3 389.8 0 0-3.8 0-7.5-0.1-11.3 -129.9 0.1-259.7 0.1-389.6 0C799.5 1537.2 799.5 1541 799.5 1544.8z"/><path d="M799.6 1508.3c129.9-0.1 259.8-0.1 389.7 0 0 3.8 0 7.6 0 11.5 -54.7 0.2-364.2 0.2-389.7 0C799.5 1516 799.5 1512.2 799.6 1508.3z"/><path d="M83.3 1417.4c-18.1-0.2-36.2-0.2-54.3 0 -0.5-137.4 0-274.8-0.3-412.2 18.3-0.1 36.6-0.2 54.8 0.1C83.2 1142.7 83.7 1280 83.3 1417.4z"/><path d="M588.8 90.7c74.3 1 183.3 3.1 183.3 3.1 27.5 67.3 1.6 119.6-11.6 131.9 -36.1-5.5-173-22.5-183.4-22.9 2.9-7.1 10.9-19 10.5-46.5C590 108.1 587.1 110.8 588.8 90.7z"/><path d="M393.4 34.5c31.7 27.2 13.3 144.2-18.3 178.5 -25.3 25.3-46.2-12.9-53.2-19.6 -9.5-10.7-24.8-12.7-38.2-13.9 -45.4-5.5-99.1-7.8-129.9-7.2 -11.8 1.2-23.8 1.9-35.6 0.1 -2.5 3-3.5-0.2-4.3-1.8l2.2 2.4c32.8-26.1 26.3-125.1-4.1-132.8 70-51.6 144.4 45.7 219.8 4.3C367.1 27.6 374.8 18.6 393.4 34.5z"/><path d="M129.9 76.3c12.3 57.8-13.6 120.1-34.7 80.6C65.1 95.3 108.8-7 129.9 76.3z"/><path d="M238.4 941.8c155.5 0.3 311.1 0.1 466.6 0.1 0.2 11.6 0.2 23.2 0 34.8 -155.5 0-311-0.1-466.6 0.1C238.1 965.1 238 953.4 238.4 941.8z"/><path d="M608.5 706.7c-147.9 0.1-269.9 0.7-269.9 0.7 0-1.3-8.4-247.7-8.4-247.7 143.4-12.1 237.7-3.4 266.7-3.5C597.2 457.8 608.4 705.6 608.5 706.7z"/><path d="M696.2 851.1c-0.4 27.9-0.1 55.7-0.1 83.6 -51.8 0.2-406.3 0.2-448.1 0 -0.1-27.9 0.2-55.7-0.1-83.6C266.4 850.6 675.4 850.7 696.2 851.1z"/><path d="M609.5 800.2c-83.2-5.8-96.6-17.3-297 0.5 -1.8-22.3-0.9-44.6-2.7-66.9 6.3 0.2 280.3 2.8 320.7 3.7 -0.4 21.4 0 42.8-0.2 64.2C623.4 800.9 616.3 801.9 609.5 800.2z"/><path d="M583.9 88c-2 26.2 4.5 81.3-8.5 107.2 -20.9 41.1-35.3 48.2-47.8 54.6 -1.1-16.2-1.2-32.5-1-48.7 -7.5-2.9-64.7-2.6-65.7-2.6 -25.2-0.3-28.3 17.6-39.4 23.3 -13.5 7.1-35.4 1.7-49.7-0.3 -2-0.8 2.5-1.3 2.4-1.2 35.3-27.5 57.5-157.2 23.3-188.6C585.3 45 581.6 29.4 583.9 88z"/><path d="M696.5 845.9c-149.6-0.1-299.1 0.3-448.7 0.1 0.2-10.8-0.2-21.6 0.2-32.4 339.1-29.1 188.8-11.2 332-10.4 0 0 115.1 9.8 116.3 9.8C696.6 824 696.6 835 696.5 845.9z"/><path d="M394.8 447.7c-0.1-0.8-8.2-210.2-8.1-218.7 12.7 0.6 26.7 3.3 38.3-3.8 8.8-4.6 12.1-15.7 21.8-18.9 15.7-7.4 59.6-1.3 75.1-1.5 0.6 50.2 7.7 240.9 7.8 242.6C529.6 447.4 394.8 447.7 394.8 447.7z"/><path d="M613.2 714.6c4.9 6.2 10.5 11.9 15.3 18.1 -179.9-2.8-274.7-2.7-314.3-3.3 27.8-20.3 19.6-16.6 28.9-17.1C407.5 713.3 605.1 707 613.2 714.6z"/><path d="M1172.7 1477c6.1 4.5 2 12.7 4.6 26.7 -20.6 0-337.7-0.2-360.9 0.4 7.4-0.2 17.8-13.5 21.5-18.9 6.3-9.1 8.3-17.2 8.8-28.2 0.8-18.3-3.1-36.8-11.4-53.1 -8.1-16-23.9-25.2-39.8-32.5 -43.4-19.1-76.3-17.4-178.5 23.9 -52.4 20.4-184 42.8-357.4-0.9 -57.9-14.1-83.2-33.4-120.5-31.3 -41.7 3.4-29.4 38.7-43 53.6 -2.9 0.7-6 2.5-9 1.4 0 0 0.6 24.3 0.9-389.7 0.9-1.5-2.5-5.2-0.6-5.2 20.5 56.4 93.4 61.8 137.3 28.3 36-26.8 33.5-66.1 35-70.4 143.4 0.3 286.8 0 430.2 0.1 24.8 55.4 75.8 42.7 197.7 144.4 73.4 60.6 168.5 169.4 202.3 263.2C1107.7 1439.7 1146.5 1453.4 1172.7 1477z"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewBox="0 0 552 712" version="1.1"><path d="m268.4 22.5c-7 0-12.6 5.6-12.6 12.6v9c-2.3-2.4-5.5-3.9-9.1-3.9h-94.7c-7 0-12.6 5.6-12.6 12.6v7.8c0 7 5.6 12.6 12.6 12.6h94.7c3.6 0 6.8-1.5 9.1-3.9v36.7c-11.2 3.3-19.3 13.5-19.3 25.8v40.4h-15.1c-14.9 0-26.9 12-26.9 26.9v23.6h-85.2c-25.5 0-46.4 19-49.3 43.7h-0.3v121.7h-9.3c-15.4 0-27.7 12.4-27.7 27.8s1.8 15.8 1.8 15.8h195.2s1.8-0.4 1.8-15.8-12.9-31.6-27.7-27.7h-7.7v-66.2h291.9v67.3c0 14.9 12 26.9 26.9 26.9 1 0 2.1-0.1 3.1-0.2v0.2h21.8v-282.6h-21.8v0.2c-1-0.1-2-0.2-3.1-0.2-14.9 0-22.3 12.7-26.9 26.9v62.3h-135.2v-23.6c0-14.9-12-26.9-26.9-26.9h-15.2v-40.4c0-12.3-8.1-22.6-19.3-25.8v-36.8c2.3 2.5 5.6 4.1 9.3 4.1h94.6c7 0 12.6-5.6 12.6-12.6v-7.8c0-7-5.6-12.6-12.6-12.6h-94.6c-3.7 0-7 1.6-9.3 4.1v-9.2c0-7-5.6-12.6-12.6-12.6z" fill="#000"/><path d="m122.2 456.3c-21.4 94.7-74 104.2-72.7 164.2 1 50 37.3 68.5 69 69 34.9 0.5 67.6-17 67.3-69.1-0.3-48.2-47.7-69.5-63.5-164zm-6.7 37.8s-10.1 39.9-14.9 45.8c-4.8 5.9-11.9 17.8-11.9 17.8l-4.8-3s17.8-25.6 20.8-33.3c3-7.7 10.7-27.4 10.7-27.4zm-43.3 75.4 7.8 1.9s-3.2 8.3-4.4 12.4c-2.5 8.4 0 44.6 0 44.6l-16 1.7s-1.7-1.7-1.7-19.3 14.3-41.2 14.3-41.2z" fill="#06f"/></svg>

<svg xmlns="http://www.w3.org/2000/svg" height="818.4" viewBox="0 0 897.2 818.4" width="897.2" version="1.1"><path d="m0 11.1h897.2v804.2h-897.2zM0 804.1" fill="#fff"/><path d="m0 804.1v-14.4l4.5-2.4c20.8-11.3 74-12.2 128.2-2.1 15.5 2.9 36.4 7.1 55.3 11.3 29.5 6.5 31.4 6.8 44.5 8.4 22.3 2.6 48.2 1.1 76.9-4.5 6.4-1.3 14-2.6 16.9-2.9 2.8-0.4 8.7-1.2 13.1-1.9 44.6-7.3 82.3-6.7 123.8 1.9 47.1 9.8 49.4 10.1 74.1 10 26.2-0.1 40-1.4 53.9-4.9 40.3-10.3 42.3-10.7 75-15.9 28.4-4.5 58-0.2 106.4 15.4 36 11.6 70.9 12.9 112.1 4.4l12.6-2.6v7.3 7.3h-448.6-448.6zm249.4-8.2c-3.4-0.5-10.7-1.5-16.4-2.3-5.7-0.8-13.3-2-16.9-2.7-10.2-2-18.3-3.5-23.9-4.5-6.4-1.1-22.4-5.4-36.6-9.7-27.1-8.3-37.6-10.8-59.2-14-33.8-5.1-47.4-5.1-71.1 0.2-5.9 1.3-12 2.6-13.6 2.8-1.5 0.3-3.2 0.8-3.7 1.2-0.5 0.4-2.5 1.4-4.5 2.2l-3.5 1.5v-10.1-10.1l5.9-2c36.5-12.7 69-9.9 134.8 11.5 25.9 8.4 48.9 14.7 62.3 16.9 2.1 0.3 8.5 1.6 14.3 2.9 20.4 4.4 43 5.1 65 1.8 16.4-2.4 66.1-12.1 89.1-17.4 41.2-9.4 81.3-10 125.4-1.8 8.7 1.6 18.1 3.3 20.9 3.7 2.8 0.4 9.4 1.4 14.5 2.3 5.2 0.8 12.8 1.9 16.9 2.4 4.1 0.5 10.9 1.3 15 1.9 19.5 2.4 49.9-0.1 73.6-6.1 60.3-15.4 98.1-17 152-6.5 40.8 7.9 84.4 9.8 105.6 4.5l2.1-0.5v12.7 12.7l-5.4 0.6c-3 0.3-7.3 1-9.6 1.5-32.8 6.8-86.5 4.6-126.2-5.1-9.2-2.2-41.2-7.8-57.7-10.1-15.1-2.1-36.1-0.2-63.6 5.6-13.5 2.9-29.2 5.9-32.3 6.2-1.5 0.2-5.8 0.7-9.4 1.3-34.9 5.3-69.2 3.5-122.3-6.3-39.7-7.4-66.6-7.8-102.7-1.9l-16.4 2.7c-2.8 0.5-8.1 1.3-11.7 1.9-3.6 0.5-8 1.4-9.8 1.8-4.8 1.2-29.1 4.8-39.4 5.7-4.9 0.5-12.9 1.3-17.8 1.8-4.9 0.5-10.8 1.1-13.1 1.3-2.3 0.2-7 0-10.3-0.5zm-15.1-19.6c-11.9-0.8-32.8-7-50.6-15-4.5-2-8.3-3.6-8.6-3.6-0.3 0-4.6-1.9-9.7-4.3-29.7-13.9-44.3-18.6-66-21.4-31.8-4.2-52.8-2.6-87.4 6.3l-12 3.1v-370.6-368.3l897.2-0.4-0.2 374.3-0.2 374.3-5.2 1.1c-2.8 0.6-9.4 1.9-14.5 3-21 4.3-52.1 2.7-73.1-3.6-3.1-0.9-10.7-3-16.9-4.7-6.2-1.6-12.7-3.5-14.5-4.2-37.2-13.6-71.6-16.8-95.6-9-2.8 0.9-11.3 3.5-18.7 5.6-22.6 6.6-54.5 16.3-60.2 18.4-15 5.5-48.6 8.7-63.4 6-27-4.9-32.4-6.1-40.8-9.3-12.7-4.8-14.5-5.5-25.3-9-15.1-4.9-20.3-6.3-26.2-7.2-3.1-0.5-8-1.2-10.8-1.7-12.5-2.1-37.1 0.3-53.4 5.2-2.3 0.7-10.1 2.9-17.3 5-7.2 2.1-16.7 5-21.1 6.5-4.4 1.5-11.8 3.9-16.4 5.3-8.6 2.5-20.5 6.3-27.2 8.5-2.1 0.7-10.8 3-19.3 5-13.9 3.3-18.2 4.1-28.5 5.1-1.5 0.2-7.7 0-13.7-0.5zm219.2-49.8c8.3-7.9 8.5-15.1 0.8-30.1-6-11.7-6.1-11.7-9.4-3.3-1.4 3.7-3.8 8.7-5.3 11-11.5 18.3-0.5 36 13.9 22.3zm-6.3-3.1c0.5-1.4 0.9-3.5 0.9-4.7 0-1.2 1-3.4 2.3-4.9l2.3-2.6 0.6 2.6c0.8 3.2-3 11.3-5.4 11.8-1.4 0.3-1.5 0-0.7-2.2zm-132.8-34.4c-4.1-4.6-20.3-16.7-28.9-21.7-5.2-3-10-5.8-10.8-6.3-16.1-10.1-43.2-18.5-61-19-21.5-0.5-26.6 5.2-12.1 13.7 8.3 4.9 42.6 14.3 59 16.2 12.1 1.4 29.4 6.9 39.4 12.5 15.5 8.6 19 9.8 14.4 4.6zm75-14.1c-11-48.1-62.5-96.9-108.9-103.3-17.2-2.4 3.3 17.3 34 32.6 29.9 14.9 57.1 42.5 70.9 71.8 4.6 9.7 6.3 9.2 3.9-1.1zm108 4.9c11.5-16.7 41.9-38.8 70.7-51.7 7-3.1 16.5-7.3 21.1-9.4 21.4-9.6 41.7-24.1 41.7-29.7 0-11.3-37.1-2.5-59.1 14.1-1.3 1-5.9 4.4-10.3 7.5-26.7 19.3-68.4 63.2-68.4 72.1 0 1.8 1.8 0.6 4.3-3zm83.3-9.2c5.5-6.1 39.5-23 60.2-30 8.2-2.8 30.9-7 48.1-9.1 10-1.2 28.1-8 28.1-10.6 0-10.4-36-12.3-63.3-3.3-20.7 6.8-68.9 40.7-75.6 53.1-1.2 2.2 0.4 2.1 2.4-0.1zm-150.9-6.8c10.5-4.8 18.2-49.5 8.6-49.5-0.6 0-1.9 1.4-2.8 3-1 1.7-3.7 5.2-6.2 7.7-10.4 11-16.7 26.4-13.5 33 2.7 5.6 8.8 8.1 13.9 5.8zm-3.2-6.2c0.1-3.7 2.5-10.7 4.4-12.6l2-2 0.6 2.5c1 3.8-0.3 8.2-3.1 11.1-2.9 3-4 3.3-4 1zm-121-32c0-3.5-11.8-15.5-24.3-24.8-32.5-24.2-73.5-23.4-49.1 1 6.4 6.4 15.3 9 36.6 10.5 14 1 29.9 7.3 33.6 13.2 0.7 1.1 3.3 1.2 3.3 0.1zm239.5-36.6c19-19.7 36.1-30.3 74.1-45.9 26.8-11 32.5-14.3 39.5-23.6 17-22.2-51.5 2-76.6 27.1-0.8 0.8-4.2 3.7-7.5 6.5-10.9 9-35.4 34.8-41.2 43.5-6.9 10.2-7.2 12.6-0.7 5.5 2.7-2.9 8.3-8.9 12.4-13.2zm-96.5-20.2c5.9-5.9 5.1-16.2-2-27.7-7.6-12.2-8.8-14.7-10.1-21.2-1.7-8.3-2.5-8.9-5.5-4.5-6.8 10-9.4 33.4-4.6 42.1 6.3 11.5 16.8 16.8 22.3 11.4zm-11.1-5.1c-2.4-2.7-3.8-9.6-2.3-11.1 2.4-2.4 9.4 5.9 7.7 9.2-1.7 3.2-3.6 4-5.4 2zm11.1-88.4c2.1-1 6.1-3.3 8.9-5.1l5.1-3.3 14.4 0.1c11 0.1 14.7-0.2 15.6-1.2 1.4-1.4 1.5-21 1.1-115.2l-0.3-53-2.9-8c-5-14-6.5-16.2-18-26.1-26.8-23.1-70-7.3-80.6 29.4-2.4 8.3-3.6 21.6-2.1 23.5 0.6 0.7 0.8 1.8 0.4 2.4-1 1.6-1.4 25.1-0.4 25.7 0.5 0.3 0.6 1.2 0.3 2-0.4 0.9 0.2 2.1 1.4 3 1.6 1.2 2 2.6 2.2 6.5 0.1 4.4 0.5 5.1 2.5 5.9 1.6 0.6 2 1.2 1.4 2-0.5 0.6-1 4.3-1.1 8.2-0.1 3.9-0.3 9.3-0.5 12-0.2 2.7 0.1 5.2 0.6 5.5 0.5 0.3 0.4 1.1-0.3 2-1 1.2-0.9 1.7 0.6 2.7 1.8 1.3 1.8 1.3 0 2.7-1.8 1.3-1.8 1.4 0.1 2.7 1.7 1.3 1.8 1.4 0.2 2-2 0.8-2.2 4.2-0.2 4.2 1.9 0 1.8 0.8-0.6 2.7-2.3 1.9-1.7 3.5 1.9 4.9l2.5 1-2.3 0.6c-3.4 0.9-3.6 3.6-0.3 4.4l2.6 0.7-3.1 1.3c-3.4 1.4-3.5 3-0.3 4.5 2.6 1.2 2.6 2.1 0 2.5-3.2 0.5-3.1 2.6 0.1 3.7 3.6 1.2 3.7 2.5 0.3 2.9-3.6 0.4-4 3.3-0.5 4.6l2.6 1-2.6 1.4c-2.6 1.4-3.4 3.5-1.6 4.6 0.7 0.4 0.7 1-0.1 1.9-1.3 1.6-0.4 3.2 1.7 3.3 1.2 0 1.1 0.4-0.8 1.9-2.4 1.9-1.6 3.7 1.6 3.7 1.7 0 1.5 1.6-0.3 2.3-0.8 0.3-1.2 1-0.8 1.6 0.4 0.6-0.1 1.7-1.1 2.4-3.1 2.3-0.3 3 13.4 3.3l13.3 0.3 4.5 4.3c7.3 7.1 12.3 7.9 21.4 3.5zm-7-2.5c0-1.6 5.3-5.8 7.3-5.8 2.7 0 2.6 1.4-0.2 4.3-2.2 2.2-7.1 3.2-7.1 1.5zm37.3-19c-0.9-0.5-1.6-1.5-1.6-2.2 0-0.7-0.7-1.4-1.6-1.6-3.4-0.7-1.7-123.8 1.7-126.9 4.9-4.4 4.8-5.7 4.5 63.6-0.3 67.5-0.3 68.6-3 67.2zm-82.8-153.9c2.4-12.1 16.5-30 25.7-32.5 9.9-2.8 15.7-0.5 10.2 4-1.9 1.5-3.4 3.6-3.4 4.6 0 1.1-3.1 5.2-7 9.4-3.9 4.1-7 7.9-7 8.3 0 0.5-0.8 0.9-1.7 0.9-0.9 0-2.7 1-3.9 2.3s-2.5 2.1-2.9 1.9c-0.4-0.2-2 0.6-3.5 1.9-4.2 3.5-7.1 3.2-6.4-0.7zm77.7-0.9c-1.6-1.7-3.2-4.3-3.5-5.8-1.8-7.6-7-15.4-13.9-20.6-8.7-6.7-4.4-9.3 6.4-3.8 15 7.6 25.7 23.2 20 29.3-1 1.1-1.9 2.5-1.9 3 0 2.1-4.5 0.8-7.2-2.1zm27.8 111.3c0.6-0.8 1.8-1.4 2.5-1.4 2.7 0 12.2-5.6 31.6-18.6 2.6-1.7 9-7.3 14.2-12.4 5.3-5.1 9.9-9.3 10.4-9.3 7.5-0.1 31.2-46.1 34.1-66.1 0.5-3.6 1.4-9.3 1.9-12.5 5.2-33.6-2.8-72.8-20.7-102.5-15.4-25.5-51.9-57.2-67.1-58.4-2.4-0.2-9.2-0.7-14.9-1-9.5-0.6-10.7-0.9-12.7-3l-2.1-2.3 2.8 0.7c6.5 1.6 26.2 2 27.5 0.5 1.3-1.6 0.7-9.9-0.9-11.9-1.9-2.3-20-2.6-23.6-0.4-4 2.5-5.4 1-2.1-2.3 1.7-1.7 3.4-2.4 6.1-2.4 6.7 0 6.9-0.4 3.4-6.9-1.7-3.2-3.6-7.5-4.2-9.5-4.3-14.5-7.7-17.3-20.4-17.3-7.6 0-9.4 0.8-6.1 2.7 1.4 0.8 1.5 1.1 0.2 1.9-1.2 0.8-1.2 1.1 0.4 2.2 1 0.7 1.5 1.8 1.2 2.3-0.3 0.6-0.2 1.3 0.2 1.5 0.5 0.3 0.7 1.3 0.4 2.3-0.3 1 0 2.1 0.6 2.4 1.2 0.8 1.4 4.9 0.1 5.6-0.5 0.3-0.8 1.3-0.8 2.2 0 0.9-0.2 2.3-0.5 3-0.8 1.9 2.7 7.5 4.7 7.5 1.8 0 5 2.6 5 4 0 0.5-0.7 0.6-1.6 0.1-0.9-0.4-13.4-1-27.8-1.3-25-0.4-26.1-0.5-24.5-2.1 1.5-1.5 3.2-1.6 18.8-1 18.2 0.7 19.4 0.4 16.7-3.5-0.9-1.2-1.5-3.2-1.3-4.3 0.1-1.1-0.2-2.3-0.7-2.6-0.5-0.3-0.7-1.2-0.5-1.9 0.3-0.7-0.4-1.8-1.5-2.4-1.1-0.6-1.7-1.4-1.4-1.9 0.3-0.5-0.3-1.6-1.3-2.5-1-0.9-1.7-1.9-1.4-2.3 0.2-0.4-0.8-1.4-2.3-2.1-1.5-0.8-3-2.1-3.3-2.9-0.3-0.8-1.2-1.4-2-1.4-0.8 0-2.7-1.4-4.3-3-8.5-9.2-26.6-1.9-32.8 13.3-2 4.8-4.7 9.5-7.2 12.3-4.6 5.1-4.9 6-1.7 5.2 2.8-0.7 7.4 0.9 6.6 2.3-0.4 0.7-3.1 0.8-7.8 0.4-9.7-0.8-15.3 7.9-10.1 15.9 3.5 5.4 2 9.6-4.6 13-7.6 3.9-18 12.3-34.3 27.9-3.6 3.4-15.4 18.7-17.3 22.4l-1.6 3.1 2.4-1.7c1.3-1 2.7-2.6 3-3.5 2.4-7.1 48.5-47.5 51.2-44.8 2.6 2.6 0.4 8.1-4.1 10.5-8.3 4.5-37.1 33.4-35.1 35.3 0.3 0.3 6.6-5.5 14-13 7.4-7.4 16.5-15.8 20.4-18.5l7-5 14.6 0.6c21.7 0.8 107.2 1.1 108.4 0.3 0.6-0.4 1.4-3.4 1.7-6.8 0.6-5.6 0.8-6.1 2.2-4.9 0.9 0.7 3.9 2.5 6.7 4 20.3 10.7 39.1 30.1 52.7 54.4 12 21.4 24.6 63.8 17.1 57.6-1.2-1-1.4-0.8-1.4 0.8 0 2.5-1.5 2.6-2.8 0.1-0.6-1-1.6-1.9-2.2-1.9-0.7 0-1.9-1.7-2.8-3.9-1.3-3.3-1.7-3.7-2.9-2.7-1.2 1-1.5 0.9-2-0.3-0.8-2.1-2.3-1.9-2.3 0.4 0 2-1.4 2.5-2.4 0.8-0.5-0.7-0.8-0.7-1.4 0.1-0.5 0.8-1 0.6-1.8-0.8-1.3-2.4-2.6-2.6-3.1-0.4-0.2 1.2-0.9 0.6-2.6-2.1-1.9-3.1-2.3-3.4-2.6-1.8-0.4 2.7-3.8 4.7-4.6 2.8-0.4-1-1.2-1.3-2.4-0.9-3 0.9-6.4 1.1-6.4 0.4 0-1.4-2.6-1.7-5-0.4-2.1 1.1-2.6 1.1-3.3-0.3-0.8-1.4-1.2-1.3-3.4 1-2 2-2.8 2.3-3.8 1.5-1.8-1.5-1.7-0.1 0.5 6.4 9.9 30.2 4.6 57.2-15.4 77.9-4.1 4.3-7.4 7.9-7.2 8.1 0.2 0.2-1 1.1-2.6 2.1-3.5 2.1-4.1 4-3.4 11.8 0.6 7.4 0.6 6.9 0 12.7-0.6 5.8 0.4 6.2 6.7 3.1 6.2-3.2 3.6 0.2-4.6 5.9-2.4 1.7-3.4 6.5-1.7 7.6 1.1 0.7 8.2-2.7 13.2-6.3 7.1-5.1 9.5-6.4 9.5-5.4 0 1.2-3.2 4.1-6.3 5.8-1.4 0.7-2.8 1.5-3 1.8-0.3 0.3-3.5 2.3-7.3 4.6-6.5 3.9-10.3 11.3-5.8 11.3 1.1 0 15-7.3 20.8-10.9 1.9-1.2 3.7-2.2 4-2.2 0.3 0 1.8-0.9 3.3-2 1.5-1.1 3-1.8 3.4-1.4 1.8 1.8-10.6 10.9-23.3 17-9 4.3-9.1 4.4-9.1 7.7 0 1.9-0.4 3-0.9 2.7-0.5-0.3-0.9 0.4-0.9 1.7 0 3.3 3.5 4.6 5.6 2zm-61.2-280.7c-21.6-0.5-23.4-0.6-24.6-2.3-1.8-2.5-1.7-3.7 0.3-2.8 0.9 0.4 12.8 0.9 26.5 1.1 14.8 0.2 25.2 0.7 25.8 1.3 1 1-1.9 3.8-3.7 3.4-0.5-0.1-11.5-0.4-24.3-0.7zm-53.9-2.6c0.4-2.2 17.6-3.1 17.6-0.8 0 2-2.1 2.5-10.5 2.5-6.6 0-7.5-0.2-7.2-1.6zm-5.1 277.7c0.4-3.8-1-5.3-8.7-9.4-7-3.8-14-8.8-13.2-9.5 0.3-0.3 2.9 1 5.9 2.8 16.7 10.1 24.9 7.1 9-3.3-3.3-2.2-5.9-4.3-5.9-4.7 0-0.8 0.2-0.7 5.9 2.8 7.5 4.6 11.3-0.6 5.2-7-3.1-3.2-3.1-3.2-0.6-2.6 3.4 0.8 3.4 0.8 4.1-14.6l0.6-13.6-6.7-6c-21.3-19-30.4-45.7-24.4-71.6 0.6-2.4 0.5-3.3-0.2-2.9-0.7 0.4-0.7 0-0.3-1.2 0.4-1 1-2.6 1.2-3.7 2.6-9.4 21.1-37.2 21.6-32.4 0.3 3.2-3.4 9.6-8.8 15.5-1.2 1.3-2.3 2.7-2.3 3.1 0 1.4-4.3 9.3-5.8 10.8-5.8 5.7-5.8 34.1 0 48.9 3.2 8.3 14.5 22.7 17.1 21.9 0.6-0.2 2.5 0.8 4.1 2.3l2.9 2.7 0.3-3.5c0.2-2.9-0.1-3.9-2.1-5.5-1.3-1.1-2.1-2.2-1.8-2.6 0.4-0.4 1.3-0.1 2.1 0.5 1.2 1 1.3 0.9 0.9-0.9-0.3-1.3 0-2.2 0.8-2.6 1.1-0.4 1.1-0.8 0.1-2.5-1-1.7-0.9-2.1 0.4-2.9 1.3-0.7 1.6-2.2 1.7-6.3 0.1-23.4 20.7-51.3 41.8-56.5 2.5-0.6 4.8-1.6 5.2-2.1 1-1.5 11.2-1.9 18.4-0.7 26 4.4 48.9 31.9 48.9 58.9 0 2.7 0.4 4.9 1 4.9 0.5 0 0.8 1.8 0.6 4.2-0.2 2.5 0.1 4.3 0.7 4.6 0.7 0.3 0.7 0.8-0.1 1.6-1.7 1.8-1.4 2.6 0.7 2.1 1.3-0.3 1.9 0 1.9 1 0 1.9 0.2 1.9 5-0.5 29.8-15.1 28.5-54.5-3.3-99-11.8-16.6-15.6-23.8-17.4-33.8-1.6-8.8 0.7-7.7 15.2 7 5.4 5.5 10.1 9.8 10.5 9.4 2.8-2.8-7.8-14.8-18.7-21.2l-7.6-4.5-0.3-4.4c-0.6-9.6 6.9-5.2 30.3 17.4 5.7 5.5 8.9 7.6 8.9 5.8 0-2-3.6-6.5-9.1-11.3-3.5-3.1-6.9-6-7.5-6.6-0.6-0.6-5.6-4-11-7.5-10.7-6.9-11.3-8-8.4-13.6 1.7-3.3 1.9-3.3 10.4 2.6 15.9 11 22.9 17.2 36.2 32 3.4 3.8 6.3 5.1 6.3 2.9 0-2.4-6-10.3-11.1-14.5-2.9-2.5-6-5.1-6.7-6-2.4-2.6-11.4-9.8-18.3-14.7-14.2-10-25.8-10.6-25.8-1.4 0 1.6-0.4 3.1-0.9 3.4-3.1 1.9-4.3 17.3-2.3 28.3 0.8 4.5 1.7 9.4 2 10.8 0.4 2.4 0.3 2.6-3 2.6-1.9 0-5 0.7-6.9 1.4-3.8 1.6-8.3 0.3-7.3-2 0.2-0.6-0.2-1.7-0.9-2.3-0.7-0.6-1.1-1.5-0.8-1.9 0.3-0.5 0.2-1.4-0.2-2-0.4-0.6-0.7-2-0.8-3 0-1.1-0.8-2-1.9-2.2-2.8-0.5-4-2-1.6-2 2.8 0 3.5-1.6 1.3-3-1.7-1.1-1.7-1.2-0.3-2.3 2.1-1.5 0.7-2.9-4.1-4-3.1-0.7-3.3-0.9-1.1-1 3.1-0.1 5.2-4.2 3.6-6.8-0.6-1-0.7-1.8-0.1-2.2 0.6-0.4 0.6-1.2 0-2.2-0.5-0.9-0.7-2.6-0.4-3.7 0.4-1.7 0.1-2-1.7-2-1.2 0-2.9-0.4-3.6-0.9-1-0.7-0.5-0.9 2.1-0.9 3.8 0 5.2-1.3 3.7-3.2-0.7-0.9-0.7-1.5 0.1-2.3 2.4-2.4-1.6-2.9-29-3.5l-28.3-0.7-0.9 2.3c-0.5 1.3-2.6 3.5-4.8 5-5.4 3.8-18.7 18.2-18.7 20.3 0 3.4 3 1.6 12.4-7.6 5.3-5.2 10-9.2 10.5-9.1 2.6 0.8 1.5 4.8-2.6 9-9.6 10-9.7 16.9 0 7.4l4-3.9v2.6c0 3.3-5.7 17.4-10.5 26.3-4.3 7.9-5.7 9.5-5.3 6.2 0.4-2.9-4.1-4.1-9.1-2.6-2.8 0.9-3.4 0.7-4.5-0.8-1.1-1.5-1.7-1.6-3.5-0.7-1.2 0.6-3.7 1.6-5.5 2.2s-4.2 1.6-5.4 2.1c-1.5 0.7-2.5 0.7-3.5-0.2-1.1-0.9-2-0.9-4.4 0.3-1.6 0.8-4.2 1.5-5.6 1.5-1.6 0-3.3 0.8-4.3 2.2-2.7 3.4-5.7 4.8-6.1 2.7-0.3-1.3-0.7-1-1.9 1.2-1.4 2.6-1.6 2.6-1.6 0.7-0.1-3-7.5 2.3-7.5 5.4 0 1.5-4.6 5.8-5.6 5.2-0.6-0.3-0.7-1.7-0.4-3 0.4-1.8 0.3-2.2-0.5-1.7-0.6 0.4-0.9 0.9-0.6 1.2 0.7 0.7-2.2 6.1-4 7.4-2.7 2-3.9 0.5-3.3-4 0.6-4.1-0.9-6-2.2-2.7-0.3 0.8-1.1 1.4-1.8 1.4-0.7 0-1.9 0.9-2.7 2.1l-1.5 2.1v-2.7c0-2.6 0-2.7-1.9-1-8.4 7.6 12.6-42.2 21.5-50.9 0.9-0.9 4-4.6 6.9-8.3 6.1-7.8 19.8-21.3 24.3-24 1.7-1 6.3-4.3 10.1-7.3 3.9-3 9.7-6.7 12.9-8.3 5.7-2.8 7.4-4.8 4.3-4.8-12.1 0-51 35.1-64.6 58.3-0.5 0.9-2.8 4.6-5 8.2-28.4 46.5-25.5 109.6 7.1 158.9 17.7 26.8 67.2 63.4 68.4 50.6zm-20.1-134.2c-2.3-6 7.7-23.4 19.9-34.4 6.3-5.7 9.5-9.3 9.7-10.9 0.2-1.3 0.8-2.9 1.3-3.5 0.7-0.9 0.5-1.2-0.6-1.2-1 0-1.5-0.6-1.2-1.6 0.2-1.1 1.1-1.6 2.4-1.4 3.2 0.3 6.8-1.4 6.2-2.9-0.3-0.8 0.3-1.8 1.4-2.4 2.5-1.3 2.9-1.3 2.9 0.4 0 0.8 0.4 1.4 0.9 1.4 0.5 0 0.2 1.8-0.6 3.9-1.4 3.5-2 9.6-1.4 15.8 0.1 1.3 0 3.8-0.1 5.6-0.3 2.4 0.2 4.1 1.9 6.2l2.2 2.9-6.2 4.5c-3.4 2.5-6.6 5.3-7.1 6.2-0.7 1.2-1.5 1.5-3.2 1.1-1.6-0.4-2.9 0-4.2 1.1-1.5 1.3-1.8 1.4-1.8 0.3 0-2.3-7.3-1.7-9.3 0.8-0.9 1.1-1.9 1.8-2.2 1.6-0.3-0.3-1.5 0.2-2.8 1-1.2 0.8-2.5 1.2-2.8 0.9-0.3-0.3-1.2 0.9-2 2.8-1.6 3.7-2.2 4.1-3.1 1.9zm127.7-20.6c-4.8-5-6-9.7-2.3-9.7 1 0 1.8-0.6 1.8-1.4 0-0.8 0.7-1.4 1.5-1.4 1.1 0 1.4-0.6 1-1.9-0.4-1.4 0-1.9 1.3-1.9 1 0 1.8-0.6 1.8-1.2 0-3.6 4.5-3.8 7.6-0.2 10.9 12.4 11.7 18.2 2.7 18.8-1.8 0.1-5.4 0.5-8.1 0.9-4.5 0.6-5 0.5-7.4-2zm-173-44.8c0-0.7 1.3-2.8 2.8-4.8 2.7-3.4 3.8-6.8 1.9-5.6-0.9 0.6-6.5 11.1-6.5 12.2 0 0.3 0.4 0.3 0.9 0 0.5-0.3 0.9-1.1 0.9-1.8zm242.4-3.1c-2.5-9.9-31.8-40.1-46.2-47.5-7.4-3.8-5.2 0.9 3.3 7.1 10.6 7.7 26.6 23.2 31 30.3 7 11.1 13.5 16.6 11.8 10.1zm-195.5-20c2.8-3.1 9-8.9 13.8-12.7 12.6-10 14.7-12.5 10.9-12.5-5 0-25.7 19.5-31.6 29.8-2 3.4 2.6 0.4 6.9-4.5zm93.2-109.4c0.4-1.1-0.2-2.3-1.8-3.7-1.7-1.5-2-2.1-1-2.1 0.8 0 1.5-0.4 1.5-0.9s-1.1-0.9-2.3-0.9c-2.3 0-3.4-1.8-1.2-1.9 3-0.2-3.1-1.7-7.1-1.7-6.1-0.1-8.1 1.1-8.1 4.9 0 3.8 1.4 5.3 5.1 5.4 1.6 0 4.5 0.6 6.6 1.3 5.3 1.7 7.7 1.7 8.4-0.2zm-0.1-13c0.3-0.3 0.1-1.2-0.4-1.9-0.9-1 1.2-1.3 12-1.2 63.4 0.1 69-1.1 69.2-14.9 0.2-16.2 2.1-15.9-104.6-15.6l-69.1 0.2-3.8 2.6c-7.2 5-9.2 12.5-5.3 20 3.9 7.5 1.6 7.2 47.4 7.7 26.4 0.3 40.7 0.8 40.6 1.4-0.3 2.1 12.2 3.6 14 1.7zm56.9-9.2c-1.3-3.4-0.6-4.2 4-4.2 5.2 0 7.4-1.4 5.1-3.1-0.9-0.7-1.3-1.6-0.9-1.9 0.4-0.4 0-1.1-0.9-1.6-0.9-0.5-1.4-1.5-1.1-2.3 0.3-0.9-0.3-1.7-1.8-2.3-1.3-0.5-2.6-1.3-3-1.9-0.3-0.5-1.8-1-3.1-1.1-2.2-0.1-2.3-0.2-0.6-0.8 9.9-4.1 21 3.6 19.9 13.8-0.8 7.1-15.2 11.5-17.5 5.4zm-152.5-1c-5.9-5.9 3.1-20.1 12.7-20.1 6.6 0 10.1 0.9 8.3 2-1.7 1.1 0.6 2.6 3.9 2.7 1.3 0 4 0.5 6.1 1.1l3.8 1.1-3.7 0.8c-2.1 0.5-5.6 0.6-7.8 0.2-2.8-0.4-3.9-0.3-3.5 0.4 0.3 0.6 2.7 1 5.3 1 5.4 0 6.2 1.5 1.3 2.4-2.3 0.4-3 0.9-2.1 1.4 1.6 1-1.3 2.3-3.3 1.5-0.7-0.3-2.5-0.2-4 0.2l-2.7 0.8 2.8 0.7c6.8 1.6 6.8 1.6 4.7 2.5-1 0.4-3.6 0.8-5.7 0.8-2.2 0-4.4 0.7-5 1.5-1.9 2.3-8.1 1.8-10.9-1z" fill="#191940"/></svg>

Конкурс завершён. Выбран ответ @UModeL

16
  • 1
    не забываем, что капля имеет форму "капли", только во время отрыва, а через несколько мгновений свободного полёта, она приобретает круглую форму ;-)
    – UModeL
    18 дек 2018 в 14:40
  • 2
    @UModeL надо же, как интересно :))) youtube.com/watch?v=3gOi0rt0qsg 18 дек 2018 в 14:44
  • 1
    Саш, ты прямо пожирнее обозначь-выдели-подчеркни, что приветствуются авторские работы "с нуля", а не сторонние готовые решения. То же относится к использованию различных плагинов и картинок. Чем "чище" код, тем лучше, в общем)
    – UModeL
    18 дек 2018 в 15:37
  • 1
    но uModel вообще красава ...вот он может на самом деле выдать очень конкурентный код и на самом деле авторский но я рискну если получится 18 дек 2018 в 16:28
  • 1
    @ПавелВаршавский всё получится. Я часто в сети нахожу такие идеи и реализации, что челюсть подбирать приходится)) Т.ч. я просто участник, но никак не фаворит)
    – UModeL
    18 дек 2018 в 17:57

4 ответа 4

25
+100

Никаких картинок, SVG и JS. Only HTML & CSS (box-shadow и ...-gradient). Удалось обойтись даже без clip-path. Только, точной подгонкой таймингов анимаций, не занимался - прикинул "на глазок":

* { margin: 0; box-sizing: border-box; padding: 0; }

body { background-color: rgb(25, 25, 64); }

.wrap {
  position: relative;
  height: 800px;
  width: 800px;
  margin: 30px auto;
  overflow: hidden;
}

.valve {
  position: relative;
  height: 570px;
  width: 315px;
  margin: 30px auto;
  animation: fade 36s ease-in 10s infinite;
}

.valve *,
.valve *:before,
.valve *:after {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.nakladka {
  top: 102px;
  height: 310px;
  width: 310px;
  border-radius: 50%;
  background-color: rgba(200, 200, 200, .9);
  box-shadow: 4px 6px 26px 0px black, inset -20px -18px 110px 21px #000000b5;
}

.klapan {
  top: 185px;
  height: 170px;
  width: 185px;
  border-radius: 50%;
  background-color: rgba(255, 230, 200, 1);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%);
  background-position: 92% 6%;
  background-size: 231% 100%;
  background-repeat: no-repeat;
  box-shadow: 15px 14px 57px -13px black, inset -10px -2px 57px -13px black;
}

.klapan:before {
  content: '';
  top: -40px;
  height: 125px;
  width: 130px;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background-color: #ffe6c8;
  background-image: linear-gradient(102deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%);
  box-shadow: inset -4px 3px 23px -15px black;
}

.klapan:after {
  content: '';
  top: -45px;
  height: 60px;
  width: 85px;
  border-radius: 0 0 50% 50%;
  background-color: #ffe6c8;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%);
  background-position: 28% 0%;
  background-size: 167% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -2px 11px 24px -8px black;
}

.mahovik {
  top: 5px;
  height: 55px;
  width: 20px;
  border-radius: 10px 10px 0 0;
  background-color: rgba(100, 100, 100, 1);
  background-image: linear-gradient(115deg, rgba(255, 255, 255, 0.4) 5%, rgba(0, 0, 0, 0.65));
  box-shadow: inset -2px 0px 10px rgba(0, 0, 0, .75);
}

.mahovik:before {
  content: '';
  top: 9px;
  height: 34px;
  width: 188px;
  border-radius: 17px;
  background-color: rgb(255, 0, 0);
  background-image: linear-gradient(90deg, rgba(255, 0, 0, 0.18) 5%, rgba(0, 0, 0, 0.15) 10%, rgba(255, 255, 255, 0.46) 15%, rgba(255, 0, 0, 0.18) 20%, rgba(255, 0, 0, 0.18) 25%, rgba(4, 4, 4, 0.18) 30%, rgba(255, 255, 255, 0.68) 40%, rgba(255, 0, 0, 0.18) 50%, rgba(255, 0, 0, 0.18) 50%, rgba(4, 4, 4, 0.18) 60%, rgba(255, 255, 255, 0.56) 71%, rgba(4, 4, 4, 0.25) 80%);
  box-shadow: inset -5px -4px 31px 4px rgba(0, 0, 0, .75);
}

.buksa {
  top: 96px;
  height: 47px;
  width: 134px;
  border-radius: 10px 10px 2px 2px;
  background-color: rgba(255, 230, 200, 1);
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0.55) 20%, rgba(255, 255, 255, 0) 24%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.19) 78%);
  box-shadow: inset -1px -1px 9px 0px rgba(0, 0, 0, 0.65);
}

.buksa:before {
  content: '';
  top: -27px;
  height: 28px;
  width: 80%;
  border-radius: 60% 60% 0 0 / 100% 100% 0 0;
  background-color: #ffe6c8;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%);
  background-position: 28% 0%;
  background-size: 167% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -11px 4px 28px -8px black;
}

.buksa:after {
  content: '';
  top: -40px;
  height: 35px;
  width: 70%;
  border-radius: 30% 30% 0 0 / 80% 80% 0 0;
  background-color: #ffe6c8;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 18%, rgba(255, 255, 255, 0.29) 35%, rgba(0, 0, 0, 0.11) 55%);
  background-position: 28% 0%;
  background-size: 167% 100%;
  background-repeat: no-repeat;
  box-shadow: inset -9px 8px 25px -10px black;
}

.nosik {
  top: 235px;
  height: 115px;
  width: 115px;
  border-radius: 50%;
  background-color: rgba(255, 230, 200, 1);
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 38%, rgba(0, 0, 0, 0.14) 77%);
  background-position: 92% 6%;
  background-size: 231% 100%;
  background-repeat: no-repeat;
  box-shadow: 6px 9px 35px -7px black;
}

.nosik:before {
  content: '';
  top: 50%;
  height: 165px;
  width: 100%;
  border-radius: 10px 10px 5px 5px;
  background-color: #ffe6c8;
  background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 5%, rgb(255, 255, 255) 15%, rgba(255, 255, 255, 0.29) 45%, rgba(0, 0, 0, 0.11) 82%);
}

.water { z-index: -1; }

.emmiter {
  top: 140px;
  height: 100px;
  width: 100px;
  transform: translateX(-50%) rotate(135deg);
  border: 1px dotted #090;
  border-radius: 100% 0 50% 60% / 50% 0 100% 60%;
  background-color: rgba(180, 206, 255, 0);
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0));
  animation: emmiter 4s ease-in infinite;
}

.drop {
  top: 140px;
  height: 100px;
  width: 100px;
  transform: translateX(-50%) rotate(-45deg);
  border-radius: 100% 0 55% 50% / 55% 0 100% 50%;
  background-color: rgba(180, 206, 255, 0);
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0));
  box-shadow: inset -2px -20px 15px -5px rgba(255, 255, 255, 0.5);
  animation: drop 4s ease-in infinite;
}

.txt_block {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  text-align: center;
  text-transform: uppercase;
  font: bold 48px 'Arial';
  color: rgb(240, 248, 255);
}

.txt_1 {
  position: absolute;
  left: -800px;
  width: 2400px;
  background-image: linear-gradient(60deg, rgb(180, 206, 255), rgba(180, 206, 255, 0), rgba(180, 206, 255, 1));
  animation: txt_1 36s ease-in-out 10s infinite;
}

.txt_1 div { position: absolute; width: 800px; }

.txt_1 div:nth-child(1) { top: 3em; left: 0px; }

.txt_1 div:nth-child(2) { top: 6em; right: 0px; }

.txt_1 div:nth-child(3) { top: 9em; left: 0px; }

@keyframes drop {
  0% {
    top: 140px;
    width: 50px;
    height: 50px;
    opacity: 0.0;
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%;
  }
  75% { height: 100px; width: 100px; }
  83% {
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%;
  }
  89% { top: 250px; opacity: 1.0; }
  95% {
    top: 470px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  }
  100% {
    top: 450px;
    opacity: 0.0;
    border-radius: 50% 100% 50% 100% / 50% 100% 50% 100%;
  }
}

@keyframes emmiter {
  0%, 100% {
    top: 140px;
    border-radius: 50% 100% 50% 100% / 50% 100% 50% 100%;
  }
  80% {
    top: 130px;
    border-radius: 100% 0 55% 50% / 55% 0 100% 50%;
  }
  88% { top: 120px; }
  90% {
    border-radius: 50% 35% 50% 50% / 50% 35% 50% 50%;
  }
}

@keyframes fade {
  0%, 100% { opacity: 1.0; }
  10%, 80% { opacity: 0.2; }
}

@keyframes txt_1 {
  0%, 100% {
    left: -800px;
    width: 2400px;
    transform: scale(1.0);
    opacity: 0.0;
  }
  15%, 20% {
    left: 0px;
    width: 800px;
    transform: scale(1.0);
    opacity: 1.0;
  }
  25% { opacity: 0.0; }
  99.99% {
    left: 0px;
    width: 800px;
    transform: scale(1.3);
  }
}

.txt_2 {
  position: absolute;
  height: 100%;
  width: 800px;
  vertical-align: middle;
}

.txt_2 div:not(:last-child) {
  display: inline-block;
  transform: scaleY(1.2) rotate(0deg);
  opacity: 0.0;
  animation: txt_2 36s ease-out 18s infinite;
}

@keyframes txt_2 {
  0%, 100% { opacity: 0.0; line-height: 30em; }
  13% { opacity: 1.0; line-height: 3em; }
  50% { opacity: 1.0; line-height: 3em; }
  60%, 99.99% { opacity: 0.0; line-height: 4em; }
}

.txt_3 {
  transform: scaleY(1.2) rotate(0deg);
  font: bold 84px 'Arial';
  color: rgb(253, 236, 34);
  opacity: 0.0;
  animation: txt_2 36s ease-in-out 18s infinite, txt_3 36s linear 26s infinite;
}

@keyframes txt_3 {
  0%, 8%, 100% { transform: scaleY(1.2) rotate(0deg); }
  1%, 3%, 5% { transform: scaleY(1.2) rotate(2deg); }
  2%, 4%, 6% { transform: scaleY(1.2) rotate(-2deg); }
  7% { transform: scaleY(1.2) rotate(2deg); }
}
<body>
  <div class="wrap">
    <div class="valve">
      <div class="nakladka"></div>
      <div class="klapan"></div>
      <div class="mahovik"></div>
      <div class="buksa"></div>
      <div class="nosik">
        <div class="water">
          <div class="drop"></div>
          <div class="emmiter"></div>
        </div>
      </div>
    </div>
    <div class="txt_block">
      <div class="txt_1">
        <div>Из капающего крана,</div>
        <div>за сутки убегает</div>
        <div>10 вёдер воды</div>
      </div>
      <div class="txt_2">
        <div>Не хотите платить</div>
        <div>лишние деньги за ЖКХ ?</div>
        <div>позвоните нам</div>
        <div class="txt_3">+7 (123) 45-67-891</div>
      </div>
    </div>
  </div>
</body>

Смотреть лучше развернув страницу.

9
  • 2
    Мне бы твои нервы))))) Держи плюс
    – Air
    22 дек 2018 в 9:01
  • @Air нервы только для анимаций нужны, а остальное - это ж творчество, в удовольствие делал)
    – UModeL
    22 дек 2018 в 9:05
  • Да там и тенями работы не мало... анимация не так сложна...))))
    – Air
    22 дек 2018 в 9:07
  • это точно творчество ...я же говорил что код конкурентный ...мастер класс 22 дек 2018 в 9:37
  • 2
    @Alexandr_TT да, не в плюсах счастье)) А в их количестве))))
    – UModeL
    22 дек 2018 в 12:04
21

Такой вот вариант:

* {
  box-sizing:border-box;
}

html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
.box {
  width: 350px;
  height: 300px;
  overflow: hidden;
  position: relative;
  padding-bottom: 5px;
  
  border:1px solid #303F9F;
  background: #eee;
}

.box-fauset {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.box-text {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 4;
  
  color:#fff;
  text-align: center;
  font-family:cursive;
  padding: 2rem;
  opacity: 0; 
  
}

.box-text p {
  font-size: 12px;
}

.text-1 {
  background: #03A9F4;
  animation: show-1 2s 10s ease-in both;
}

.text-2 {
  background: #303F9F;
  animation: show-1 2s 15s ease-in both;
}


@keyframes show-1 {
  from { opacity: 0; z-index: 0; }
  to { opacity: 1; z-index: 10; }
}

.fauset {
  width: 200px;
}


.wave {
  position: absolute;
  bottom: 0px;
  height: 10px;
  left: 70px;
  width: 200px;
  background: dodgerblue;
  border-radius: 50%;
  opacity: 1;
  
  animation: wave-0 3s 3s infinite;
}

.wave:before,
.wave:after {
  content:'';
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 0 2px rgb(0, 79, 177);
}

.wave:before {
  animation: wave-1 2s 3s forwards infinite;
}

.wave:after {
  animation: wave-2 2s 3s forwards infinite;
}



@keyframes wave-0 {
  0% {
    opacity: 1;
    transform: scale3d(1, 1, 1);
  }
  50% {
    opacity: 1;
    transform: scale3d(1.2, 1.2, 1);
  }
}

@keyframes wave-1 {
  0% {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
  100% {
    opacity: 0;
    transform: scale3d(1.1, 1.1, 1);
  }
}


@keyframes wave-2 {
  0% {
    opacity: 1;
    transform: scale3d(0.5, 0.5, 1);
  }
  50%, 100% {
    opacity: 0;
    transform: scale3d(1.2, 1.2, 1);
  }
}




.btn-drop {
  position: absolute;    
  opacity: 0;
  pointer-events: none;    

  /* transition:all 2s ease-in-out; */
}

.btn-drop_0 {
  left: 160px;
  transform-origin: 50% 50%;
  transform: rotate(0deg);
  fill: #03a9f4;
  top: 110px;
}

.btn-drop_1 {
  left: 100px;
  bottom: 10px;
  transform-origin: 150% 50%;
  transform: rotate(180deg);
  fill: skyblue;
}
.btn-drop_2 {
  left: 220px;
  bottom: 10px;
  transform-origin: -50% 50%;
  transform: rotate(180deg);
  fill: #2196f3;
}




.dot {
  position: absolute;
  border-radius: 50%;    
  opacity: 0;
  pointer-events: none;
  background: #03a9f4;
  margin: 0;
  width: 5px;
  height: 5px;
  left:170px;
  bottom: 10px;
}



.box .btn-drop_0 {
  animation: drop-0 2s 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards infinite;
}

.box .btn-drop_1 {
  animation: drop-1 2s 3s ease-out forwards infinite;
}

.box .btn-drop_2 {
  animation: drop-2 2s 3s ease-out forwards infinite;
}




.box .dot:nth-of-type(1) {
  animation: anim-1 2s 3s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards infinite;
}

.box .dot:nth-of-type(2) {
  animation: anim-2 2s 3s ease-out forwards infinite;
}






@keyframes drop-0 {

  0% {
    opacity: 1;
    transform: scale(1.5) translateY(20px);
  }
  50% {
    opacity: 1;
    transform: scale(2.5) translateY(170px);
    animation-timing-function: ease-out;
  }
  100% {
    opacity: 0;
    transform: scale(2) translateY(180px);
  }
}


@keyframes drop-1 {
  0% {
    opacity: 1;
    transform: rotate(180deg) translateY(0px) scale(1);
  }
  80% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;        
    transform: rotate(90deg) translateY(20px) scale(1.25);
  }
}

@keyframes drop-2 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: rotate(270deg);
  }
}

@keyframes anim-1 {
  0% {
    opacity: 1;
    transform: scale(0.1);
  }
  70% {
    opacity: 0.7;
    transform: translateY(-70px) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-60px) scale(1);
  }
}

@keyframes anim-2 {
  0% {
    opacity: 1;
    transform: scale(0.1);
  }
  70% {
    opacity: 0.5;
    transform: translateY(-100px) translateX(-20px) scale(1);

  }
  100% {
    opacity: 0;
    transform: translateY(-90px) translateX(-20px) scale(1);
  }
}

video {
  visibility:hidden;
} 
<div class="box">
  <div class="box-fauset">
    <svg class="fauset" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 384.929 384.929">

        <g>
            <path fill="goldenrod" d="M350.246,191.25v-66.938c0-5.259-4.303-9.562-9.562-9.562h-19.125c-5.26,0-13.865,0-19.125,0s-13.865,0-19.125,0H248.08    c-8.683-14.535-22.548-25.599-39.101-30.562c4.389-2.448,7.392-7.086,7.392-12.47c0-7.918-6.426-14.344-14.344-14.344h-4.781    V38.25h43.031c7.918,0,14.344-6.426,14.344-14.344s-6.426-14.344-14.344-14.344h-43.031c0-5.278-3.185-9.562-9.562-9.562    s-9.562,4.284-9.562,9.562h-43.031c-7.918,0-14.344,6.426-14.344,14.344s6.426,14.344,14.344,14.344h43.031v19.125h-4.781    c-7.918,0-14.344,6.426-14.344,14.344c0,5.872,3.538,10.901,8.587,13.12c-11.867,3.959-22.271,11.064-30.255,20.349H63.371V76.5    c0-10.566-8.559-19.125-19.125-19.125S25.121,65.934,25.121,76.5v143.438c0,10.566,8.559,19.125,19.125,19.125    s19.125-8.559,19.125-19.125v-38.25h65.264c11.475,21.783,34.31,36.653,60.645,36.653c33.488,0,61.315-24.031,67.301-55.778    h26.728c5.26,0,9.562,4.303,9.562,9.562v19.125c-5.26,0-9.562,4.303-9.562,9.562v19.125c0,5.26,4.303,9.562,9.562,9.562h57.375    c5.26,0,9.562-4.303,9.562-9.562v-19.125C359.808,195.553,355.505,191.25,350.246,191.25z"/>

        </g>
    </svg>

    <svg class="btn-drop btn-drop_1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075z"/></svg>
    <svg class="btn-drop btn-drop_2" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075zm-.027 5.12c.467.725 1.027 1.987 1.027 3.32 0 3.908-4 4.548-4 2.17 0-1.633 1.988-4.044 2.973-5.49z"/></svg>  
    <svg class="btn-drop btn-drop_0" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-4.87 7.197-8 11.699-8 16.075 0 4.378 3.579 7.925 8 7.925s8-3.547 8-7.925c0-4.376-3.13-8.878-8-16.075zm-.027 5.12c.467.725 1.027 1.987 1.027 3.32 0 3.908-4 4.548-4 2.17 0-1.633 1.988-4.044 2.973-5.49z"/></svg>

    <span class="dot"></span><span class="dot"></span>


    <div class="wave"></div>
  </div>
  
  <div class="box-text text-1">
    <h1>Из капающего крана, за сутки убегает 10 вёдер воды</h1>
  </div>
  
  <div class="box-text text-2">
    <h1>Не хотите платить лишние деньги за ЖКХ, позвоните нам.</h1>
    <p>
      +7 (123) 45-67-891
    </p>
  </div>
</div>

7
  • 1
    Отдал решение, как пока единственному ответу, удовлетворяющему условиям в вопросе до конкурса. Победителем конкурса и получить +100 может любой участвующий и не обязательно этот ответ. 20 дек 2018 в 15:31
  • 2
    @Alexandr_TT всё верно. У меня "предновогодний марафон" на работе - времени нет пока. Позже всё равно добавлю ответ, не баллов ради, а разнообразия для))
    – UModeL
    20 дек 2018 в 17:43
  • 1
    @Alexandr_TT Ждите, скоро сфотошопю картинки и тоже добавлю.
    – Ver Nick
    20 дек 2018 в 18:50
  • 1
    @Ver Nick а может и не надо фотошопить, добавил в вопрос векторные картинки. 21 дек 2018 в 5:16
  • 1
    @Alexandr_TT Уже поздно :)
    – Ver Nick
    21 дек 2018 в 8:20
14

Отличную каплю можно взять отсюда

body {
  background-color: #3498DB;
  overflow: hidden;
}

div {
  margin: 175px auto;
}

.drop {
  position: relative;
	width: 20px;
	height: 20px;
  top: -30px;
  margin: 0 auto;
	background: #FFF;
	-moz-border-radius: 20px;
	-webkit-border-radius: 20px;
	border-radius: 20px;
  -moz-animation-name: drip;
  -webkit-animation-name: drip;
  animation-name: drip;
  -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
  -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
  animation-timing-function: cubic-bezier(1,0,.91,.19);
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.drop:before {
  content: "";
  position: absolute;
  width: 0;
	height: 0;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 30px solid rgba(255,255,255,1);
  top: -22px;
}

.wave {
  position: relative;
  opacity: 0;
  top: 0;
	width: 2px;
	height: 1px;
  border: #FFF 7px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple;
  -webkit-animation-name: ripple;
  animation-name: ripple;
  -moz-animation-delay: 2s;
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.wave:after {
  content: "";
  position: absolute;
  opacity: 0;
  top: -5px;
  left: -5px;
	width: 2px;
	height: 1px;
  border: #FFF 5px solid;
	-moz-border-radius: 300px / 150px;
	-webkit-border-radius: 300px / 150px;
	border-radius: 300px / 150px;
  -moz-animation-name: ripple-2;
  -webkit-animation-name: ripple-2;
  animation-name: ripple-2;
  -moz-animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -moz-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

@keyframes ripple {
    from {
      opacity: 1;
    }
    to {
      width: 600px;
      height: 300px;
      border-width: 1px;
      top: -100px;
      opacity: 0;
    }
}

@keyframes ripple-2 {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  100% {
    width: 200px;
    height: 100px;
    border-width: 1px;
    top: 100px;
    left: 200px;
  }
}

@keyframes drip {
    to {
      top: 190px;
    }
}
<div class="drop"></div>
<div class="wave"></div>

Водопроводный кран

svg * {
    fill: inherit;
}

.tap{
    fill: grey;
    position: relative;
    margin: 20px auto 0;
    width: 200px;
    height: 200px;
}
.tap svg{
    width: 100%;
    height: 100%;
}

use.faucet-off{
    display:block;
}

use.faucet-on{
    display: none;
}

.tap.on use.faucet-off{
    display: none;
}

.tap.on use.faucet-on{
    display: block;
}

#emitter {
    position: absolute;
    right: 20px;
    bottom: 30px;
}

.particle {
    position: absolute;
    width: 10px;
    height: 10px;
    background: lightblue;
    opacity: 0.7;
    border-radius: 50%;
    z-index: -1;
}
<svg id="main" xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="tap-off" viewBox="0 0 360.01 269.78">
        <path  fill="#ff0" d="M299.51,121l-87.86-20.4v16.17h-10a18.37,18.37,0,0,0-.44,2.64c0,6.8,0,13.59-.05,20.39,0,2,.54,2.79,2.63,3.13,12.76,2,22.9,8.6,31,18.51a5.17,5.17,0,0,0,4.62,2.18c6.1-.13,12.2,0,18.57,0v41.4H237.41c8.25,10.23,17,18,30.2,18.1,10.81,0.08,21.64-.69,32.43-0.29,14.68,0.55,28.66,4.21,41.25,12.13,16.17,10.18,25.8,25.27,31.62,43,4.87,14.88,6.85,30.25,7.08,45.87,0.05,3.43,0,6.86,0,10.54H323.23c-0.4-5.64-.25-11.21-1.27-16.56-2.94-15.46-13.42-25.38-29.12-27.67a120.17,120.17,0,0,0-16.84-.79c-1.38,0-3,1-4.13,2-23.61,19.28-50.28,30.4-81.09,30.13-23.71-.21-45.07-8.14-64.77-20.9a16.53,16.53,0,0,0-7.69-2.31c-12.21-1.37-23.14,1.47-32.94,8.9a7.88,7.88,0,0,1-4.42,1.5c-19.81.1-39.62,0.06-59.43,0.05-0.44,0-.89-0.08-1.53-0.15V205.13c0.76,0,1.42-.11,2.08-0.11,19.12,0,38.24,0,57.36-.06a4.65,4.65,0,0,1,4.44,2.43c2.94,4.54,6.08,8.95,9,13.47,1,1.51,2,1.85,3.89,1.76q19.49-.82,39-1.06c2.68,0,4.16-.82,5.37-3.15,2.27-4.35,4.85-8.54,7.57-13.28H128.86v-41.6c7.93,0,15.74.06,23.54-.06a5.08,5.08,0,0,0,3.5-1.32c9.81-11.91,14.67-15.15,29.52-19.23v-26H170.15V100.55L82.17,121V65.22l87.66,20.36,0.54-4.84h40.94l0.54,4.83,87.66-20.36V121Z" transform="translate(-20 -65.22)"/>
    </symbol>

    <symbol id="tap-on" viewBox="0 0 360.01 269.78" >
        <path fill="#ff9900" d="M380,324.13c-0.23-15.62-2.21-31.15-7.08-46-5.82-17.78-15.45-32.95-31.62-43.13C328.7,227,314.72,223.35,300,222.8c-10.79-.4-21.62.38-32.43,0.3-13.19-.1-21.94-8.1-30.2-18.1H258V163.54c-7,0-12.49-.09-18.59,0a5.18,5.18,0,0,1-4.63-2.18c-8.06-9.91-18.2-16.48-31-18.51-2.09-.33-2.66-1.17-2.63-3.13,0.08-6.79,0-13.47.05-20.26a14.69,14.69,0,0,1,.44-2.52H211V100.58a68.77,68.77,0,0,1,12.92,3.87c2.82,7.32,8.28,13,15,15.35A10.13,10.13,0,0,0,241,121v-0.55a25.3,25.3,0,0,0,5.17.6c13.35,0,24.25-12.49,24.25-27.91s-10.94-27.91-24.29-27.91a24.93,24.93,0,0,0-5.12.6v-0.6a11.46,11.46,0,0,0-2.11,1.29c-6.62,2.41-11.92,8-14.72,15.26a72.06,72.06,0,0,1-12.37,3.94c-0.21-1.83-.33-2.7-0.5-4.7H170.37c-0.17,2-.34,2.87-0.54,4.71-8.33-1.93-13.2-3.61-16.23-5.07a21.59,21.59,0,0,0-11.42-10.3A12.15,12.15,0,0,0,140,69.22V69.7a14.27,14.27,0,0,0-3.84-.47c-11.21,0-20.21,10.7-20.21,23.89s9,23.89,20.17,23.89a14.61,14.61,0,0,0,3.89-.47V117a8.86,8.86,0,0,0,2-1,21.17,21.17,0,0,0,11.46-10.35c3.06-1.49,7.55-3.13,16.55-5.1V117h15v25.92c-15,4.09-19.5,7.33-29.31,19.23-0.7.85-2.63,1.31-3.83,1.32-7.8.12-15.87,0.06-23.87,0.06V205h20.75c-2.73,5-5.3,9-7.57,13.35-1.22,2.33-2.69,3.15-5.37,3.19q-19.5.24-39,1.08c-1.93.08-2.9-.25-3.89-1.76-3-4.52-6.11-8.93-9-13.47A4.65,4.65,0,0,0,79.43,205C60.31,205,41.2,205,22.08,205a17.59,17.59,0,0,0-2.08.11V308.52a7,7,0,0,0,1.53.15c19.81,0,39.62,0,59.43-.05a7.88,7.88,0,0,0,4.42-1.5c9.8-7.44,20.73-10.27,32.94-8.9a16.53,16.53,0,0,1,7.69,2.31c19.7,12.77,41.06,20.7,64.77,20.9,30.81,0.27,57.48-10.86,81.09-30.13,1.16-.95,2.74-2,4.13-2a120.16,120.16,0,0,1,16.84.79c15.7,2.29,26.18,12.54,29.12,28,1,5.35.87,10.89,1.27,16.89H380C380,331,380,327.56,380,324.13Z" transform="translate(-20 -65.22)"/>
    </symbol>
</svg>

<div class="tap">
    <svg>
        <use class="faucet-on" xlink:href="#tap-on"></use>
        <use class="faucet-off" xlink:href="#tap-off"></use>
    </svg>

    <div id="emitter"></div>
</div>

5
  • 2
    ну, что же вы так торопитесь :) Искать чужие решения могут многие :)) Речь шла об учебном топике, то есть сделать самому. И в условиях было,- реализация сценария банера. Но раз обещал положительную реакцию, ловите плюс (+) 18 дек 2018 в 15:32
  • 2
    Ну не всегда нужно писать велосипед с нуля, всегда лучше посмотреть на решения, которые уже есть, дабы вынести хорошие практики и пути решения 18 дек 2018 в 15:58
  • 2
    согласен про велосипед :) Но даже, если берется чужое решение, то лучше его творчески переработать, тогда запомнятся решения. А копи-паст, если продолжать тему про велосипеды, эта даже не перекраска велосипеда, а перегон его в другой гараж. 18 дек 2018 в 16:02
  • 4
    а почему не капает?)))
    – Air
    19 дек 2018 в 6:43
  • 1
    Никита глянь пожалуйста историю правок (ты там пропустил и я в том числе, принимая её, самую важную деталь. Такой ОС не существует. Так, в целом не будущее): ru.stackoverflow.com/posts/926123/revisions По ознакомлении удалю
    – user262779
    27 дек 2018 в 14:57
4

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

Функция(в цикле) выполняется только один раз, я без понятия почему. А так первый раз все работает отлично. Найти ошибку я уже не успеваю :/

$('#splash').fadeOut(0);
$('#sign1').fadeOut(0);
$('#sign2').fadeOut(0);
function func(){
  $('#splash').delay(2000).fadeIn(200).delay(100).fadeOut(200);
  $('#splash').delay(1500).fadeIn(200).delay(100).fadeOut(200);
  $('#splash').delay(1500).fadeIn(200).delay(100).fadeOut(200);
  $('#drop').delay(6000).fadeOut(0);
  $('#crane').delay(6000).fadeOut(400);
  $('#water').delay(6000).fadeOut(400);
  $('#sign1').delay(6000).fadeIn(400).delay(1000).fadeOut(400);
  $('#sign2').delay(7000).fadeIn(400).delay(1000).fadeOut(400);
  $('#drop').delay(3000).fadeIn(500);
  $('#crane').delay(3000).fadeIn(400);
  $('#water').delay(3000).fadeIn(400);
  $('#splash').delay(3000).fadeOut(0);
}
func();
#sign1, #sign2{
  font-size: 30px;
  color: white;
  position: absolute;
}

body {
  background-color: #191940;
}
#water{
  position: absolute;
  top: 80%;
  width: 99%;
  z-index: 3;
}
#crane{
  position: absolute;
  top: 5%;
  width: 10%;
  left: 50%;
  z-index: 2;
}
#drop{
  position: absolute;
  top: 30%;
  width: 1%;
  left: 54.5%;
  z-index: 1;
  animation: fall 2s ease-in;
  animation-iteration-count: 3;
}
#splash{
  position: absolute;
  top: 75%;
  width: 10%;
  left: 50%;
  z-index: 2;
  transform: rotate(15deg);
}
@keyframes fall{
  from{
    transform: translateY(0);
  }
  to{
    transform: translateY(500px);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="sign1">Из капающего крана, за сутки убегает 10 вёдер воды.</div>
<div id="sign2">Не хотите платить лишние деньги за ЖКХ, позвоните нам.</div>
<div><img src = "https://i.stack.imgur.com/b0WHy.png" id = "crane"></div>
<div><img src = "https://i.stack.imgur.com/az3ux.png" id = "water"></div>
<div><img src = "https://i.stack.imgur.com/kdigx.png" id = "drop"></div>
<div><img src = "https://i.stack.imgur.com/UPrlO.png" id = "splash"></div>

4
  • Недочёты, конечно есть, вы их сами лучше видите. Плюс за (+) 26 дек 2018 в 16:08
  • @Alexandr_TT Я после конкурса все-таки попытаюсь доделать этот кран.
    – Ver Nick
    26 дек 2018 в 20:51
  • Всплеск от капли не там, где она падает в воду. Но дизайн убедил, апну.
    – 0xdb
    26 дек 2018 в 22:52
  • @0xdb Это зависит от того на каком экране смотреть. У меня все отлично.
    – Ver Nick
    27 дек 2018 в 7:51

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.