- Совместимость с XenForo
- 2.0.x
- 2.1.x
- 2.2.x
Переходим в виджеты admin.php?widgets выбираем добавить виджет HTML и прописываем код:
Получаем такой результат:
HTML:
<section id="mago">
<div id="gato"></div>
<svg viewBox="0 0 500 600" xml:space="preserve">
<g>
<path opacity="0.4" fill="#0F0F13" d="M42.667,422c-1.013,0.385-1.995,0.763-2.947,1.135 C13.399,433.417,12.667,440.667,22,441.333c7.193,0.514,43.226,0.828,47.3,5.671S63.557,461,91.112,462 s-39.933,18.408,11.616,39.333c49.272,20,125.938,28.667,194.688,0c68.876-28.72-42.084-52.329-108.75-51.333L42.667,422z"/><linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="79.8325" y1="450.8647" x2="71.3696" y2="407.3804"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_1_)" d="M104.049,397c-9.883,5-46.947,17.5-59.415,21.5s-19.968,14.5-7.468,16s37.5-0.5,40,5.5 s29.5,6.5,42.5,7S104.049,397,104.049,397z"/><path fill="#131111" d="M141.789,334.5C167.6,280,172.061,224.334,181.53,222s74.632-2.561,59.733,22.654 c-10.544,17.844-8.847,39.806,6.51,76.678c11.674,28.03,17.894,76.334,17.894,76.334S134.446,349.964,141.7,334.5z"/><linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="-114.9004" y1="404.772" x2="-128.5444" y2="213.3273" gradientTransform="matrix(1.7633 0.0373 -0.0106 0.5021 352.3541 110.7233)"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_2_)" d="M112.47,241.397c2.182,0.719,44.759-6.477,51.196,13.271 c6.596,20.233-31.033,98.998-66.587,147.332c-1.43,1.944,48.31-47.452,54.767-67.686c3.948-12.371,41.274-76.631,47.82-86.486 c4.539-6.834-18.824-23.526-26.193-26.532c-7.366-3.005-52.974-17.992-56.139-15.643 C114.168,208.001,112.47,241.397,112.47,241.397z"/><linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="35.4941" y1="351.9448" x2="25.6364" y2="213.6275" gradientTransform="matrix(-1.7633 0.0373 0.0106 0.5021 294.6469 110.7233)"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_3_)" d="M278.167,244.655c-2.182,0.719-34.947-5.901-41.385,13.846 c-6.596,20.233,20.598,71.791,26.732,89.885c0.819,2.415-9.047,16.903-15.741-4.021c-3.51-10.969-35.035-80.154-43.106-95.81 c-3.76-7.292,12.492-16.254,19.861-19.259c7.366-3.005,52.974-17.992,56.139-15.643 C283.833,216.001,278.167,244.655,278.167,244.655z"/><linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="93.1475" y1="240.2417" x2="110.9748" y2="195.3497"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_4_)" d="M87.118,240.5c4.012,4.313,32.215,14.834,32.215-1.5s6.338-35.409,2.125-41.082 s-27.26-27.536-29.026-22.728S87.118,240.5,87.118,240.5z"/><linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="-10.9224" y1="248.7759" x2="6.9041" y2="203.8859" gradientTransform="matrix(-0.9778 -0.2097 -0.2097 0.9778 340.0004 5.539)"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_5_)" d="M304.353,252.6c-4.827,3.376-34.609,7.749-31.184-8.223c3.426-15.97,1.229-35.951,6.538-40.614 c5.308-4.662,32.428-21.206,33.146-16.134C313.572,192.701,304.353,252.6,304.3,252.6z"/><path fill="#A39891" d="M329.257,259.333C335.333,254,342.306,252,338.153,234s-2.8-52.2-3.82-58.809 s-13.998-10.241-19.832-10.383s-11.167,14.085-13.167,22.305s-6.666,38.887-6,46.887s4.653,26,10.993,28 S329.257,259.333,329.257,259.333z"/><path fill="#A39891" d="M56,217c-0.667,3,3.333,15.333,10,23.5s15.878,14.167,18.939,14.167s4.592-4.333,7.493-14.167 c2.901-9.833-0.901-30.895,0-36.031s6.234-27.803,4.234-34.469s-6.122-14.667-11.728-14.667s-21.699,26-23.652,34.667 S56,217,56,217z"/><path d="M314.5,173.272c-2.804,3.363-3.531,16.667-6.683,31.198s-1.483,33.839,6.683,40.185S331.667,251,328.667,234 s-3.719-59.182-3.719-59.182L314.5,173.272z"/><path d="M61.287,220.561c10.189-31.999,16.925-61.207,23.652-54.884s-4.272,45.444-4.272,54.884S80.738,242,74.202,239 S61.287,220.561,61.287,220.561z"/><ellipse fill="#8C7E75" cx="203.155" cy="228.328" rx="17.511" ry="16.327"/><linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="197.6895" y1="491.9673" x2="202.59" y2="344.8659"><stop offset="0" style="stop-color:#666666"/><stop offset="0.5933" style="stop-color:#333333"/></linearGradient><ellipse fill="url(#SVGID_6_)" cx="200.1" cy="419" rx="107.693" ry="89"/><path opacity="0.3" fill="#CCCCCC" d="M209.297,486.3c-46.83-3.793-82.147-39.523-78.886-79.804 c2.378-29.361,24.612-53.02,54.624-62.229c-43.963,3.704-79.09,32.07-82.1,69.2c-3.4,42.5,36.4,80.4,89.0,84.6 c39.6,3.2,75.2-13.612,91.888-40.299C267.259,477.328,239.589,488.8,209.2,486.3z"/><radialGradient id="SVGID_7_" cx="199.6665" cy="357.5142" r="131.3366" gradientTransform="matrix(1 0 0 0.3408 0 236.9112)" gradientUnits="userSpaceOnUse"><stop offset="0.1398" style="stop-color:#333333"/><stop offset="0.2419" style="stop-color:#393939"/><stop offset="0.5269" style="stop-color:#444444"/><stop offset="0.629" style="stop-color:#535353"/><stop offset="0.8495" style="stop-color:#5D5D5D"/><stop offset="1" style="stop-color:#666666"/></radialGradient><ellipse fill="url(#SVGID_7_)" cx="199.667" cy="358.75" rx="87" ry="29.25"/><ellipse fill="#B8B5B5" cx="202.683" cy="247.584" rx="6.65" ry="7.083"/><path d="M271.333,356.9c0,9.114-36.3,16.0-72.351,16.066s-71.316-7.388-71.3-16.5s35.3-16.5,71.3-16.5 S271.3,347.8,271.3,356.9z"/><linearGradient id="SVGID_8_" gradientUnits="userSpaceOnUse" x1="148.41" y1="394.17" x2="197.992" y2="360.4074"><stop offset="0.3407" style="stop-color:#D4FC9D"/><stop offset="1" style="stop-color:#339065"/></linearGradient><path fill="url(#SVGID_8_)" d="M264.667,359.6c0,7.5-33.0,13.388-65.657,13.3c-32.6,0-64.7-6.1-64.7-13.751 c0-7.5,32.0-13.7,64.7-13.7C231.6,345.5,264.6,352.0,264.6,359.613z"/><defs><path id="SVGID_9_" d="M297.417,177.1c-2.19-8.8-15.75-35.191-31.6-44.81c-7.9-16.9,1.82-18.3-27.1-22.8 c0-3.371,0.6-12.6-11.3-23.6C219.3,78.5,209.4,66,199.0,67s-10.9-10-16.6-16.5c0,0-22.76-7.5-33.76-8.5s-11.9-22-13.9-27s-23.0-1-11.9-1s9.2,6.0,11.97,24c1.6,11.1,13.0,19.2,29.0,20 c10.5,0.5,9.0,31,3.0,32s-17,6-18,12c-0.538,3.2,5.5,13.7,5,14c-19,7-6.3,10.4-6.1,15.1 c-1.5,0.3-38.4,30.4-38.8,41.8c-3.0,7.0,14.6,26.2,16.9,31c7.8,16.2,104.75,43,150.9,1.4 C283.3,199.3,296.6,194.3,297.4,177.1z"/></defs><linearGradient id="SVGID_10_" gradientUnits="userSpaceOnUse" x1="201.5557" y1="125.9487" x2="230.4104" y2="3.2517"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><use xlink:href="#SVGID_9_" overflow="visible" fill="url(#SVGID_10_)"/><clipPath id="SVGID_11_"><use xlink:href="#SVGID_9_" overflow="visible"/></clipPath><path clip-path="url(#SVGID_11_)" fill="#463F3B" d="M139.167,223.5c-3.823-4.61,141.271,31.645,143.75-37.75 c0.25-7-24.861-47.439-54.896-50.611c-16.905-1.786-74.354-4.639-99.354,36.361c-7.77,12.743-11.034-0.918-9-4.5 c9.714-17.104,36.957-36.737,48.667-37.667c21-1.667,51.667-3,51.667-3s-61.337,2.207-61.004-3.793S172,113.667,182,114 s42.707,0.302,46.02-0.016c0.92-0.088,23.611,1.373,27.146-5.984c3.534-7.357-56.588-47.913-47.476-39.045 c54.476,53.008-36.769,37.455-39.524,36.545C163.933,104.103,162,97,173,94s5.175-17.333,4.254-23.333S176.689,54.857,165.842,55 c-50.509,0.667,1.491,22-6.509,27S90,183.667,99.333,188S139.167,223.5,139.167,223.5z"/><path clip-path="url(#SVGID_11_)" fill="#2C2724" d="M278.333,181c-17.667-35-73.667-56-124.667-25s-3.834,69.702,45.659,66.541 C296.667,216.323,278.333,181,278.333,181z"/><linearGradient id="SVGID_12_" gradientUnits="userSpaceOnUse" x1="202.793" y1="233.6748" x2="202.5165" y2="129.3126"><stop offset="0.1268" style="stop-color:#D4FC9D"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path fill="url(#SVGID_12_)" d="M258.667,185.923c0,27.104-25.072,49.077-56,49.077s-56-21.973-56-49.077s25.072-38.923,56-38.923 S258.667,158.819,258.667,185.923z"/><path fill="#1D1D1C" d="M236.662,213.75c-1.186,1.141-10.995,12.5-17.745,13.5c-6.03,0.894-18.825-1.004-17.855-1.25 c3.605-0.916,13.564,0.354,18.605-1C227.167,222.986,238.047,212.417,236.662,213.75z"/><path fill="#1D1D1C" d="M213.667,186.34c3,0.161,13.99-11.089,18.995-10.089s14.755,2.929,14.755,10.089s2.5-6.715-5.75-10.152 s-9.5-4.313-15.5,0S213.667,186.34,213.667,186.34z"/><defs><path id="SVGID_13_" d="M241.667,148.228c-35,12.772-77.513,23.82-87,41.772c-4.915,9.3-9.03,22.918-9.633,37.082 c-0.561,13.18,1.921,26.832,9.633,37.918c16,23-27.936-30.174-25.557-57.444c1.968-22.556-0.094-45.889,52.057-64.556 C217.566,129.972,241.667,148.228,241.667,148.228z"/></defs><use xlink:href="#SVGID_13_" overflow="visible" fill="#EBEBEB"/><clipPath id="SVGID_14_"><use xlink:href="#SVGID_13_" overflow="visible"/></clipPath><path clip-path="url(#SVGID_14_)" fill="#B9B7B0" d="M156.667,187c4.667-18.333,47.992-35.8,53.333-37 c9.77-2.195-3.833-10.11-23.333-5.11s-40,19.301-47.5,32.301s-7.5,46.309-5.5,53.809s-15.75-21.25-2.65-56.5 c8.009-21.553,45.468-45.5,70.309-43s48.473,7.001,47.841,11.5s-10.5,15-23.5,19s-32.5,1.5-46,10.5S154.044,197.302,156.667,187z"/><path fill="#F1F7E8" d="M231.243,142.118c-12.183,1.03-26.282,35.666-24.827,32.666c-0.19,0.435-10.768,25.635-10.805,30.48 s4.144-14.115,18.069-26.657c11.93-10.745,27.313-19.17,27.556-19.244c-8.82,9.887-10.143,24.904-11.584,27.543L246.2,161.86 c5.573,2.89,17.967,9.412,12.967,43.64c-3.214,21.998-13,35-13,35c13.25-9.5,26.5-23.5,28.5-48.485 C276.621,167.603,244.437,141.002,231.243,142.118z M207.109,173.209c0.154-0.36,0.321-0.716,0.497-1.071 c-0.175,0.375-0.35,0.75-0.521,1.127C207.094,173.245,207.101,173.229,207.109,173.209z"/><path fill="#1D1D1C" d="M200.985,182.34c-0.569,1.911-4.751,5.839-7.66,0S182.727,161.5,175.5,160.412 c-5.819-0.876-18.912,11.314-13.833,9.099c3.837-1.673,15.5-18.344,26.675,9.323c1.987,4.919,6.411,12.374,8.368,11.02 S200.985,182.34,200.985,182.34z"/>
<ellipse fill="#1D1D1C" cx="188.698" cy="193.516" rx="4.946" ry="5.152"/><ellipse fill="#D7D7D7" cx="188.934" cy="195.114" rx="1.636" ry="1.805"/><ellipse fill="#1D1D1C" cx="225.656" cy="193.891" rx="6.761" ry="6.777"/><ellipse fill="#D7D7D7" cx="225.667" cy="195.905" rx="2.25" ry="2.014"/></g>
<g id="derch">
<path id="SVGID_15_" d="M314.5,184.342c-1.647,3.287-2.234,11.797,0.046,10.771c3.637-1.634,9.199-4.995,13.424-7.738 c2.188-1.422,8.564-5.682,11.737-2.592c3.175,3.092,4.81,4.465,5.912,1.837c1.102-2.628,0.893-8.096-1.025-8.957 c-1.92-0.861-4.941,1.414,3.377-4.702c8.319-6.118,13.67-8.843,13.806-10.64c0.136-1.798-0.163-4.878-2.043-3.63c-1.88,1.248-10.104,7.024-11.193,7.638c-1.089,0.613,5.35-7.314,7.106-10.312c1.756-2.997,3.362-6.769,0.705-8.43c-2.655-1.661-4.031-0.026-5.704,4.646c-1.674,4.67-6.289,8.704-7.351,9.875c-1.063,1.171,4.845-10.76,5.333-14.478c0.489-3.718,0.229-6.728-1.69-7.081c-1.921-0.354-3.935,4.223-4.669,7.505c-0.734,3.282-3.722,11.562-4.689,12.393c-0.966,0.832,1.079-12.181,1.154-15.616c0.073-3.435-1.166-8.188-3.591-7.397c-2.424,0.791-3.063,3.732-2.816,8.757s-0.882,11.685-1.861,14.531c-0.979,2.846-3.534,6.521-4.6,11.195C323.554,182.079,314.5,184.342,314.5,184.342z"/><linearGradient id="SVGID_16_" gradientUnits="userSpaceOnUse" x1="343.2886" y1="215.2041" x2="395.3948" y2="161.4737" gradientTransform="matrix(0.8714 -0.4905 0.4905 0.8714 -72.6487 176.9725)"><stop offset="0.3407" style="stop-color:#D4FC9D"/><stop offset="1" style="stop-color:#333333"/></linearGradient><use xlink:href="#SVGID_15_" overflow="visible" fill="url(#SVGID_16_)"/><clipPath id="SVGID_17_"><use xlink:href="#SVGID_15_" overflow="visible"/></clipPath><path clip-path="url(#SVGID_17_)" fill="#5C6C45" d="M317.206,180.059c-1.524,3.373-0.451,9.053,1.491,9.107c1.943,0.053,9.849-4.59,11.466-5.116c1.616-0.526,7.334-2.599,8.254,2.431c0.918,5.029-24.5,14.187-24.5,14.187l-2.797-6.958l-1.687-16.924L317.206,180.059z"/><path clip-path="url(#SVGID_17_)" fill="#5C6C45" d="M334.653,172.235c0.337,2.296,0.236,4.838,2.779,4.938c2.542,0.1,7.337,0.461,9.243-0.229c1.905-0.693,15.847-11.6,16.664-13.207c0.816-1.607-14.707,8.871-19.788,10.375C338.469,175.615,334.653,172.235,334.653,172.235z"/></g>
<g id="izq">
<path id="SVGID_18_" d="M85.882,177.479c-0.141,4.364-1.269,10.689-3.613,9.821c-3.739-1.383-5.218-3.43-9.619-5.88c-2.28-1.27-8.931-5.086-11.886-1.788c-2.958,3.3-4.495,4.781-5.774,2.234c-1.277-2.546-1.44-8.016,0.415-9.005c1.857-0.99,5.026,1.075-3.688-4.462c-8.716-5.539-14.239-7.894-14.497-9.677c-0.258-1.785-0.169-4.878,1.792-3.761c1.96,1.118,10.557,6.322,11.686,6.86c1.128,0.538-5.834-6.935-7.791-9.805c-1.955-2.871-3.814-6.525-1.276-8.363c2.536-1.837,4.021-0.3,6.007,4.248c1.987,4.546,6.866,8.256,8.004,9.353c1.14,1.096-5.564-10.406-6.305-14.083c-0.74-3.676-0.686-6.697,1.206-7.179c1.893-0.483,4.213,3.946,5.168,7.171c0.956,3.225,4.499,11.282,5.521,12.045c1.02,0.765-1.904-12.079-2.212-15.501c-0.307-3.422,0.607-8.249,3.08-7.624c2.472,0.624,3.31,3.515,3.405,8.545c0.095,5.031,1.674,11.598,2.845,14.372c1.169,2.773,3.969,6.266,5.35,10.857C76.696,175.836,85.882,177.479,85.882,177.479z"/><linearGradient id="SVGID_19_" gradientUnits="userSpaceOnUse" x1="583.5688" y1="342.6938" x2="634.153" y2="290.533" gradientTransform="matrix(-0.9027 -0.4302 -0.4302 0.9027 742.6418 130.2105)"><stop offset="0.3407" style="stop-color:#D4FC9D"/><stop offset="1" style="stop-color:#333333"/></linearGradient><use xlink:href="#SVGID_18_" overflow="visible" fill="url(#SVGID_19_)"/><clipPath id="SVGID_20_"><use xlink:href="#SVGID_18_" overflow="visible"/></clipPath><path clip-path="url(#SVGID_20_)" fill="#5C6C45" d="M81.555,173.386c1.75,3.261,1.066,9.001-0.869,9.188c-1.935,0.185-10.138-3.91-11.787-4.326c-1.648-0.415-7.494-2.094-8.069,2.986c-0.574,5.08,21.604,8.633,21.604,8.633l6.121-3.276l0.532-16.999L81.555,173.386z"/><linearGradient id="SVGID_21_" gradientUnits="userSpaceOnUse" x1="36.3989" y1="164.7026" x2="65.1172" y2="164.7026" gradientTransform="matrix(0.9977 -0.0679 0.0679 0.9977 -11.3156 5.0996)"><stop offset="0.3407" style="stop-color:#8C7E75"/><stop offset="1" style="stop-color:#333333"/></linearGradient><path clip-path="url(#SVGID_20_)" fill="url(#SVGID_21_)" d="M64.954,166.769c-0.18,2.313,0.093,4.843-2.438,5.115c-2.529,0.272-7.289,0.958-9.237,0.399c-1.948-0.562-16.599-10.496-17.523-12.044c-0.923-1.548,15.276,7.852,20.448,9.006C61.376,170.4,64.954,166.769,64.954,166.769z"/></g>
<g class="pompas">
<circle id="pompa1" opacity="0" fill="#F1F7E8" cx="201.667" cy="250.833" r="8"/><circle id="pompa2" opacity="0" fill="#F1F7E8" cx="188.667" cy="344" r="21"/><circle id="pompa3" opacity="0" fill="#F1F7E8" cx="148.667" cy="344.833" r="8"/><circle id="pompa4" opacity="0" fill="#F1F7E8" cx="234.917" cy="359" r="15"/><circle id="pompa5" opacity="0" fill="#F1F7E8" cx="233" cy="329.07" r="14"/><circle id="pompa6" opacity="0" fill="#F1F7E8" cx="170.5" cy="298.871" r="5"/><circle id="pompa7" opacity="0" fill="#F1F7E8" cx="214.5" cy="289.871" r="7"/><circle id="pompa8" opacity="0" fill="#F1F7E8" cx="209.5" cy="364.871" r="5"/><circle id="pompa9" opacity="0" fill="#F1F7E8" cx="215" cy="368.903" r="10"/><circle id="pompa10" opacity="0" fill="#F1F7E8" cx="214" cy="349.871" r="8"/><circle id="pompa11" opacity="0" fill="#F1F7E8" cx="180" cy="364.871" r="16"/><circle id="pompa12" opacity="0" fill="#F1F7E8" cx="239" cy="356" r="11"/><circle id="pompa13" opacity="0" fill="#F1F7E8" cx="170" cy="356" r="13"/>
</g></svg></section>
<style>
#mago{
margin: auto;
}
#gato {
background: url('https://res.cloudinary.com/pastelitos/image/upload/v1610526964/eva/gatito2_eov3hf.svg');
height: 177px;
width: 98px;
position: absolute;
margin-top: 81px;
margin-left: 133px;
}
#gato:hover {
-webkit-animation: sprite-animation 5s steps(27,end) infinite; /* steps = number of frames */
-moz-animation: sprite-animation 5s steps(27,end) infinite; /* steps = number of frames */
animation: sprite-animation 5s steps(27,end) infinite;
}
@-webkit-keyframes sprite-animation {
from {
background-position: 0 0;
}
to {
background-position: -4064.89px 0;
}
}
@-moz-keyframes sprite-animation {
from {
background-position: 0 0;
}
to {
background-position: -4064.89px 0;
}
}
@keyframes sprite-animation {
from {
background-position: 0 0;
}
to {
background-position: -4064.89px 0;
}
}
#pompa1{
-webkit-animation: pompa1 3s Ease infinite;
-moz-animation: pompa1 3s Ease infinite;
-ms-animation: pompa1 3s Ease infinite;
animation: pompa1 3s Ease infinite;
}
@-moz-keyframes pompa1{
60%{
opacity: 0.8;
}
100%{
-moz-transform: translate(55px,-140px);
}
}
@-webkit-keyframes pompa1{
60%{
opacity: 0.8;
}
100%{
-webkit-transform: translate(55px,-140px);
}
}
@-ms-keyframes pompa1{
60%{
opacity: 0.8;
}
100%{
-ms-transform: translate(55px,-140px);
}
}
@keyframes pompa1{
60%{
opacity: 0.8;
}
100%{
transform: translate(55px,-140px);
}
}
#pompa2{
-moz-animation: pompa2 4s Ease infinite;
-webkit-animation: pompa2 4s Ease infinite;
animation: pompa2 4s Ease infinite;
}
@-moz-keyframes pompa2{
60%{
opacity: 0.8;
}
100%{
-moz-transform: translate(-55px,-130px);
}
}
@-webkit-keyframes pompa2{
60%{
opacity: 0.8;
}
100%{
-webkit-transform: translate(-55px,-130px);
}
}
@keyframes pompa2{
60%{
opacity: 0.8;
}
100%{
transform: translate(-55px,-130px);
}
}
#pompa3{
-moz-animation: pompa3 3.7s 1s Ease infinite;
-webkit-animation: pompa3 3.7s 1s Ease infinite;
animation: pompa3 3.7s 1s Ease infinite;
}
@-webkit-keyframes pompa3{
60%{
opacity: 0.8;
}
100%{
-webkit-transform: translate(-25px,-110px);
}
}
@-moz-keyframes pompa3{
60%{
opacity: 0.8;
}
100%{
-moz-transform: translate(-25px,-110px);
}
}
@keyframes pompa3{
60%{
opacity: 0.8;
}
100%{
transform: translate(-25px,-110px);
}
}
#pompa4{
-webkit-animation: pompa1 2.9s 1s Ease infinite;
-moz-animation: pompa1 2.9s 1s Ease infinite;
animation: pompa1 2.9s 1s Ease infinite;
}
#pompa5{
-webkit-animation: pompa5 3.4s Ease infinite;
-moz-animation: pompa5 3.4s Ease infinite;
animation: pompa5 3.4s Ease infinite;
}
@-webkit-keyframes pompa5{
60%{
opacity: 0.8;
}
100%{
transform: translate(75px,-130px);
}
}
@-moz-keyframes pompa5{
60%{
opacity: 0.8;
}
100%{
transform: translate(75px,-130px);
}
}
@keyframes pompa5{
60%{
opacity: 0.8;
}
100%{
transform: translate(75px,-130px);
}
}
#pompa6{
-webkit-animation: pompa6 2.8s Ease infinite;
-moz-animation: pompa6 2.8s Ease infinite;
animation: pompa6 2.8s Ease infinite;
}
@-webkit-keyframes pompa6{
60%{
opacity: 0.8;
}
100%{
transform: translate(65px,-100px);
}
}
@-moz-keyframes pompa6{
60%{
opacity: 0.8;
}
100%{
transform: translate(65px,-100px);
}
}
@keyframes pompa6{
60%{
opacity: 0.8;
}
100%{
transform: translate(65px,-100px);
}
}
#pompa7{
-moz-animation: pompa7 3.2s 1.5s Ease infinite;
-webkit-animation: pompa7 3.2s 1.5s Ease infinite;
animation: pompa7 3.2s 1.5s Ease infinite;
}
@-webkit-keyframes pompa7{
60%{
opacity: 0.8;
}
100%{
transform: translate(85px,-120px);
}
}
@-moz-keyframes pompa7{
60%{
opacity: 0.8;
}
100%{
transform: translate(85px,-120px);
}
}
@keyframes pompa7{
60%{
opacity: 0.8;
}
100%{
transform: translate(85px,-120px);
}
}
#pompa8{
-moz-animation: pompa1 3.5s Ease infinite;
-webkit-animation: pompa1 3.5s Ease infinite;
animation: pompa1 3.5s Ease infinite;
}
#pompa9{
-webkit-animation: pompa9 4s Ease infinite;
-moz-animation: pompa9 4s Ease infinite;
animation: pompa9 4s Ease infinite;
}
@-webkit-keyframes pompa9{
0%{
transform: translate(0px,0px);
}
60%{
opacity: 0.8;
}
100%{
transform: translate(-75px,-90px)
}
}
@-moz-keyframes pompa9{
0%{
transform: translate(0px,0px);
}
60%{
opacity: 0.8;
}
100%{
transform: translate(-75px,-90px);
}
}
@keyframes pompa9{
0%{
transform: translate(0px,0px);
}
60%{
opacity: 0.8;
}
100%{
transform: translate(-75px,-90px);
}
}
#pompa10{
-webkit-animation: pompa10 2.5s Ease infinite;
-moz-animation: pompa10 2.5s Ease infinite;
animation: pompa10 2.5s Ease infinite;
}
@-webkit-keyframes pompa10{
60%{
opacity: 0.5;
}
100%{
transform: translate(5px,-30px);
}
}
#pompa11{
-webkit-animation: pompa11 2.5s Ease infinite;
-moz-animation: pompa11 2.5s Ease infinite;
animation: pompa11 2.5s Ease infinite;
}
@-webkit-keyframes pompa11{
60%{
opacity: 0.5;
}
100%{
transform: translate(-20px,-60px);
}
}
@-moz-keyframes pompa11{
60%{
opacity: 0.5;
}
100%{
transform: translate(-20px,-60px);
}
}
@keyframes pompa11{
60%{
opacity: 0.5;
}
100%{
transform: translate(-20px,-60px);
}
}
#pompa12{
-webkit-animation: pompa12 3.2s Ease infinite;
-moz-animation: pompa12 3.2s Ease infinite;
animation: pompa12 3.2s Ease infinite;
}
@-webkit-keyframes pompa12{
40%{
opacity: 0.7;
}
100%{
transform: translate(10px,-80px);
}
}
@-moz-keyframes pompa12{
40%{
opacity: 0.7;
}
100%{
transform: translate(10px,-80px);
}
}
@keyframes pompa12{
40%{
opacity: 0.7;
}
100%{
transform: translate(10px,-80px);
}
}
#pompa13{
-webkit-animation: pompa13 2.7s Ease infinite;
-moz-animation: pompa13 2.7s Ease infinite;
animation: pompa13 2.7s Ease infinite;
}
@-webkit-keyframes pompa13{
40%{
opacity: 0.7;
}
100%{
-webkit-transform: translate(-50px,-100px);
}
}
@-moz-keyframes pompa13{
40%{
opacity: 0.7;
}
100%{
-moz-transform: translate(-50px,-100px);
}
}
@keyframes pompa13{
40%{
opacity: 0.7;
}
100%{
transform: translate(-50px,-100px);
}
}
#derch{
-webkit-animation: mano_derch 1s Ease infinite;
-moz-animation: mano_derch 1s Ease infinite;
animation: mano_derch 1s Ease infinite;
}
@-webkit-keyframes mano_derch{
0%{
-webkit-transform: rotate(-0.4deg);
}
30%{
-webkit-transform: rotate(0.5deg);
}
100%{
-webkit-transform: rotate(-0.4deg);
}
}
@-moz-keyframes mano_derch{
0%{
transform: rotate(-0.4deg);
}
30%{
transform: rotate(0.5deg);
}
100%{
transform: rotate(-0.4deg);
}
}
@keyframes mano_derch{
0%{
transform: rotate(-0.4deg);
}
30%{
transform: rotate(0.5deg);
}
100%{
transform: rotate(-0.4deg);
}
}
#izq{
-webkit-animation: mano_izq 1s Ease infinite;
-moz-animation: mano_izq 1s Ease infinite;
-ms-animation: mano_izq 1s Ease infinite;
animation: mano_izq 1s Ease infinite;
}
@-webkit-keyframes mano_izq{
0%{
transform: rotate(0.5deg);
}
30%{
transform: rotate(-0.4deg);
}
100%{
transform: rotate(0.5deg);
}
}
@-ms-keyframes mano_izq{
0%{
-ms-transform: rotate(0.5deg);
}
30%{
-ms-transform: rotate(-0.4deg);
}
100%{
-ms-transform: rotate(0.5deg);
}
}
@-moz-keyframes mano_izq{
0%{
transform: rotate(0.5deg);
}
30%{
transform: rotate(-0.4deg);
}
100%{
transform: rotate(0.5deg);
}
}
@keyframes mano_izq{
0%{
transform: rotate(0.5deg);
}
30%{
transform: rotate(-0.4deg);
}
100%{
transform: rotate(0.5deg);
}
}
</style>
![[PB] Xmas Garland](/data/resource_icons/4/4378.jpg?1735108341){kind=icon}
