1#@!#!123s

: / home3 / encodto1 / junglebellresort.com /
Filename : demo-bubble.php
back
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Text Bubble Animation Effect</title>
	<style type="text/css">
		body{
			background: #000;
		}
	:root, *::before, *::after {
	--diameter        : 250px;
	--font_size       : 50px;
	--background_color: #fff;
	--font_color      : rgb(250, 171, 181);
	--neon-glow       : rgb(252, 0, 0);
}
:root, *::before, *::after {--wobble  : calc(0.5   * var(--diameter));--pc05    : calc(0.025 * var(--diameter));--pc10    : calc(0.05  * var(--diameter));--pc15    : calc(0.075 * var(--diameter));--pc20    : calc(0.1   * var(--diameter));--pc25    : calc(0.125 * var(--diameter));--pc30    : calc(0.15  * var(--diameter));}


@keyframes flow {from{transform: translate(0);} to {transform: translate(100vw);}}

#bubbles {
	position   : absolute;
	left       : 0;
	top        : 100px;
	width      : 100vw;
	height     : 100vh;
	background : var(--background_color);
}

.b0 {--bubble_index: 0;}
.b1 {--bubble_index: 1;}
.b2 {--bubble_index: 2;}
.b3 {--bubble_index: 3;}
.b4 {--bubble_index: 4;}

.bubble {
	position   : absolute;
	left       : calc(var(--bubble_index) * var(--diameter));
    height     : var(--diameter);
	width      : var(--diameter);
	color      : var(--font_color);
	font-size  : var(--font_size);
	line-height: var(--diameter);
	text-align : center;
	margin-top : 100vh;
	text-shadow: 0 0 4px     var(--neon-glow),
	             0 0 2.5vmin var(--neon-glow),
			     0 0 5vmin   var(--neon-glow),
                 0 0 10vmin  var(--neon-glow),
                 0 0 15vmin  var(--neon-glow);

	--delay    : calc(0.75s * var(--bubble_index));
	
	animation: rise 10s linear var(--delay) infinite, sideways 2s ease-in-out var(--delay) infinite alternate;
}

.bubble:before {
	position     : absolute;
	left         : 0%;
    height       : var(--diameter);
	width        : 100%;
	border-radius: 50%;
	content      : "";
	box-shadow   : 0 var(--pc20) var(--pc30) rgba(0, 0, 0, 0.2), inset 0 var(--pc10) var(--pc30) 5px rgba(255, 255, 255, 1);

}

.bubble:after {
	position     : absolute;
	left         : 5%;
	height       : 90%;
	width        : 90%;
	border-radius: 50%;
	content      : "";
    background   : radial-gradient(ellipse at center, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
	box-shadow   : inset 0 var(--pc20) var(--pc30)    rgba(255, 255, 255, 0.3);
}

@keyframes rise     { 0% {margin-top: 100vh;} 100% {margin-top: -100px;}}
@keyframes sideways { 0% {transform: translateX(0) rotate(-10deg);} 100% {transform: translateX(var(--wobble)) rotate(10deg);}}

	</style>
</head>
<body>
<div class="cont">
	<div id="wave">
		<svg
		   viewBox="0 0 1440 100"
		   version="1.1"
		   id="wave_tile"
		   xmlns="http://www.w3.org/2000/svg"
		   xmlns:svg="http://www.w3.org/2000/svg"
		>
		  <path
			 id="wave_tile"
			 style="fill:#00bbff;fill-opacity:1;stroke-width:0.489805"
			 d="m 0,7.8749812 4.80038,-0.44321 C 49.3427,3.3192212 67.5,25.083331 102,19.949231 136.15,15.007131 171.5,2.5969912 205.5,0.19790117 240,-2.2011788 274.5,17.951131 308.5,20.686131 c 34.35,2.543 68.5,-12.8111498 103,-12.8111498 34.2,0 67.5,7.3541498 102,12.4882498 34.05,4.9421 69.5,8.1439 103.5,2.8659 34.45,-5.278 68.5,-10.0761 86,-12.8111 L 720,7.8749812 V 99.999531 H 702.85 617 514.5 411.5 308.5 205.5 103 17 0 Z m 720,0 4.8,-0.44321 c 44.543,-4.11255 62.7,17.6515598 97.2,12.5174598 34.15,-4.9421 69.5,-17.3522398 103.5,-19.75132983 34.5,-2.39907997 69,17.75322983 103,20.48822983 34.35,2.543 68.5,-12.8111498 103,-12.8111498 34.2,0 67.5,7.3541498 102,12.4882498 34.05,4.9421 69.5,8.1439 103.5,2.8659 34.45,-5.278 68.5,-10.0761 86,-12.8111 l 17,-2.5430498 V 99.999531 h -17.15 -85.85 -102.5 -103 -103 -103 H 823 737 720 Z" />
		</svg>
	</div>
	<div id="bubbles">
		<div class="bubble b0">Casting</div>
		<div class="bubble b1">Fashion</div>
		<div class="bubble b2">Events</div>
		<div class="bubble b3">Marketing</div>
		<div class="bubble b4">Entertainment</div>
	</div>

</div>
</body>
</html>