Аноним
СОЗДАНИЕ СОВ
0 прочитано
Создать сов сов больше нет!Создайте новых... .promo, .owlwr { text-align: center; margin-bottom: -70px; } .owlwr { margin-bottom: 100px; zoom: .5; } .owl { animation: floaty 1.75s infinite; } .owlwr svg { height: 130px; } .bird { transition-property: box-shadow; transition-duration: 0.3s; animation: pop 1s 1; } #owly { position: relative; display: none; } .shadow { fill: rgba(42, 24, 66, 0.82); animation: shadow 1.75s infinite; transform-origin: 50% 50%; } .Eye1, .Eye2 { animation: blink 5s infinite; transform-origin: 0px; } .Wing_Left { animation: shake-left-wing 500ms infinite; transform-origin: 37% 0%; } .Wing_Right { animation: shake-right-wing 500ms infinite; transform-origin: 57% 0%; } .Left_Leg { animation: shake-left-leg 1.5s infinite; transform-origin: 66% 0%; } .Right_Leg { animation: shake-right-leg 2s infinite; transform-origin: 32% 2%; } .st0 { display: none; } .st1 { fill: #FE931D; stroke: #E4764F; stroke-miterlimit: 10; } .st4 { fill: #D4B2EE; } .st5 { fill: #BD95DC; } .st6 { display: none; fill: #BD95DC; } .st7 { fill: #FFFFFF; } .st8 { stroke: #000000; stroke-miterlimit: 10; } .st9 { fill: #FFFFFF; stroke: #000000; stroke-miterlimit: 10; } .st10 { fill: #482D2C; } .Eye1, .Eye2, .Wing_Left, .Wing_Right, .Left_Leg, .Right_Leg, .pupil, .rear, .lear, .lflitter, .rflitter, .rleg, .lleg { transform-box: fill-box; } @keyframes blink { 40% { transform: scaleY(1); } 45% { transform: scaleY(0.1); } 50% { transform: scaleY(1); } } @keyframes shake-left-wing { 0% { transform: rotate(0deg); } 50% { transform: rotate(130deg); } 100% { transform: rotate(0deg); } } @keyframes shake-right-wing { 0% { transform: rotate(0deg); } 50% { transform: rotate(-130deg); } 100% { transform: rotate(0deg); } } @keyframes shake-left-leg { 0% { transform: rotate(0deg); } 50% { transform: rotate(30deg); } 100% { transform: rotate(0deg); } } @keyframes shake-right-leg { 0% { transform: rotate(0deg); } 50% { transform: rotate(-30deg); } 100% { transform: rotate(0deg); } } @keyframes floaty { 0% { transform: translateY(25px); } 50% { transform: translateY(0px); } 100% { transform: translateY(25px); } } @keyframes shadow { 0% { transform: scale(0.9); } 50% { transform: scale(1); } 100% { transform: scale(0.9); } } @keyframes pop { 0% { height: 0; } 100% { height: 140px; } } @keyframes movingBg { to { background-position: 100% 100% } } .advice { font-size: 17px; font-weight: 100; margin: 0px; margin-top: -10px; margin-bottom: 73px; font-weight: 300; color: red; animation: blink 1.3s step-end infinite; } .atuin-btn { display: inline-flex; text-decoration: none; border: 2px solid #cccccf; position: relative; overflow: hidden; font-size: 14px; line-height: 20px; padding: 6px 25%; color: #837b7b; font-weight: 400; text-transform: uppercase; background: #e4e3ed; transition: box-shadow 0.3s, transform 0.3s; cursor: pointer; /* zoom: .6; */ width: 100%; text-align: center; border-radius: 6px 6px 6px 6px; } .atuin-btn:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(-45deg, transparent, rgba(191, 226, 255, 0.3), transparent); transition: left 0.7s; } .atuin-btn:hover:before, .atuin-btn:active:before, .atuin-btn:focus:before { left: 100%; } document.addEventListener('DOMContentLoaded', function() { generateSomeOwls(1, 100); var renderBtn = document.getElementById("generate"); var clearBtn = document.getElementById("clear"); var cloneCount = 1; renderBtn.addEventListener("click", function() { generateSomeOwls(1, 200); }); clearBtn.addEventListener("click", clearOwls); function generateRandomHexCode() { var hexCode = '#'; var hexSym = ["A", "B", "C", "D", "E", "F", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]; for (var i = 0; i < 6; i++) { var randSym = hexSym[Math.floor(hexSym.length * Math.random())]; hexCode += randSym; } return hexCode; } function generateSomeOwls(number, timeout) { var count = 0; var int = setInterval(function() { go(); if (count > number) clearInterval(int); count++; }, timeout); } function go() { var svg = document.getElementById("owly"); var clone = svg.cloneNode(true); clone.setAttribute('id', 'owl' + cloneCount++); var elements = clone.querySelectorAll('.st-body,.st-belly,.wing'); for (var i = 0; i < elements.length; i++) { elements[i].setAttribute("fill", generateRandomHexCode()); } var wrapper = document.getElementById('wrap'); wrapper.appendChild(clone); toggleAdvice(); } function clearOwls() { var allowls = document.querySelectorAll("#wrap svg:not(#owly)"); Array.prototype.forEach.call(allowls, function(node) { node.parentNode.removeChild(node); }); toggleAdvice(); } function toggleAdvice() { var container = document.querySelector("#wrap"); var adv = document.querySelector(".advice"); var children = container.childElementCount; if (children > 1) { adv.style.opacity = 0; } else { adv.style.opacity = 1; } } }); Удалить сов ... Ещё
◣ развернуть
ответить 0
18:36
✓✓