Как сделать баннер с капающем краном.
У меня есть изображение капающего крана
Сценарий анимации
Вот так, по списку, должны идти этапы анимации, далее зацикливание,- переход к первому пункту.
Для реализации анимации допустимы SVG
, CSS
, Javascript
, jquery
или их совместное использование.
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
Никаких картинок, 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>
Смотреть лучше развернув страницу.
Такой вот вариант:
* {
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>
Отличную каплю можно взять отсюда
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>
Извиняюсь, что все так ужасно сделано, но выбрасывать так долго писанный код, для которого я долго вырезал картинки, было очень жалко.
Функция(в цикле) выполняется только один раз, я без понятия почему. А так первый раз все работает отлично. Найти ошибку я уже не успеваю :/
$('#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>
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Имеется подключённый к HTML-документу файл scriptjs,написанный на jquery
Пытаюсь в приложении на C# Unity3D вызвать функции из неуправляемой библиотекиДобавил ее в Assets, со следующими настройками