Пример:
HTML:
|
1 2 3 4 5 |
<div class="bubble"> <div class="bubble-logo"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M32,384a95.4,95.4,0,0,0,32,71.09V496a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V480H384v16a16,16,0,0,0,16,16h32a16,16,0,0,0,16-16V455.09A95.4,95.4,0,0,0,480,384V336H32ZM496,256H80V69.25a21.26,21.26,0,0,1,36.28-15l19.27,19.26c-13.13,29.88-7.61,59.11,8.62,79.73l-.17.17A16,16,0,0,0,144,176l11.31,11.31a16,16,0,0,0,22.63,0L283.31,81.94a16,16,0,0,0,0-22.63L272,48a16,16,0,0,0-22.62,0l-.17.17c-20.62-16.23-49.83-21.75-79.73-8.62L150.22,20.28A69.25,69.25,0,0,0,32,69.25V256H16A16,16,0,0,0,0,272v16a16,16,0,0,0,16,16H496a16,16,0,0,0,16-16V272A16,16,0,0,0,496,256Z"/></svg> </div> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 |
.bubble { min-height: 560px; margin: 20px 0; background-image: url(photo.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative; overflow: hidden; } .bubble span { height: 50px; width: 50px; border-radius: 50%; position: absolute; pointer-events: none; transform: translate(-50%, -50%); box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset, 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset, 0 5px 25px #fff inset; animation: bubble-animate 5s linear forwards; } .bubble-logo { display: flex; justify-content: center; align-items: center; width: 140px; height: 140px; border-radius: 100%; box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset, 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset, 0 5px 25px #fff inset; position: absolute; right: 40px; top: 80px; z-index: 2; } .bubble-logo::after { content: ""; position: absolute; top: -25px; right: -16px; width: 70px; height: 70px; border-radius: 100%; box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset, 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset, 0 5px 25px #fff inset; opacity: 0.5; z-index: 1; animation: bubble-float 9s ease-in-out infinite alternate; } .bubble-logo::before { content: ""; position: absolute; top: -18px; left: 40px; width: 20px; height: 20px; border-radius: 100%; box-shadow: 0 -3px 5px #fff inset, 0 -10px 25px #ddf1e4 inset, 0 2px 2px #fff inset, 2px 0 5px #fff inset, -2px 0 5px #fff inset, 0 5px 25px #fff inset; opacity: 0.6; z-index: 1; animation: bubble-float 5s ease-in-out infinite alternate; } .bubble-logo svg { fill: #FFF; width: 56px; height: 56px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); } @keyframes bubble-animate { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -1000%) scale(0); opacity: 0; } } @keyframes bubble-float { 0% { transform: translateY(0px); } 50% { transform: translateY(-30px); } 100% { transform: translateY(0px); } } |
JS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
let bubble = document.querySelector(".bubble"); bubble.addEventListener("mousemove", (e) => { let circle = document.createElement("span"); let x = e.clientX - bubble.getBoundingClientRect().left; let y = e.clientY - bubble.getBoundingClientRect().top; circle.style.left = x + "px"; circle.style.top = y + "px"; let size = Math.random() * Math.floor(Math.random() * (150 - 10 + 1) + 10); circle.style.width = 20 + size + "px"; circle.style.height = 20 + size + "px"; bubble.appendChild(circle); setTimeout(() => { circle.style.opacity = 0; setTimeout(() => { circle.remove(); }, 2500); }, 2500); }); |
За основу взято решение, найденное на codepen.io у пользователя Jake Bogan
Добавить комментарий: