Мыльные пузыри для секции

Пример:

HTML:

<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>

</div>

CSS:

.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);
	}
}

.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:

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);
});

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);

});

За основу взято решение, найденное на codepen.io у пользователя Jake Bogan

Пример:

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий: