<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
	<head>
		<title>LANTERN DEMO</title>
		<style>
			body	{
				background-color : #190f00;
			}
		</style>
	</head>
	<body>
		<center>
			<div class = "lantern">
				<div class = "outerLight"></div>
				<div class = "lanternBody">
					<div class = "innerLight"></div>
				</div>
			</div>
		</center>
	</body>
	<script>

	</script>
</html>
@keyframes shake {
	0% {
		transform : rotate(10deg) scale(1);
	}
	50% {
		transform : rotate(-10deg) scale(1);
	}
	100% {
		transform : rotate(10deg) scale(1);
	}
}
@keyframes innerlightbreathe {
	0% {
		height : 30px;
		width : 30px;
		opacity : 0.1;
		top : 35px;
		left : 10px;
	}
	20% {
		-webkit-clip-path : inset(0px 0px 0px 0px);
		clip-path : inset(0px 0px 0px 0px);
	}
	50% {
		height : 60px;
		width : 60px;
		opacity : 0.5;
		top : 5px;
		left : -5px;
		-webkit-clip-path : inset(0px 5px 0px 5px);
		clip-path : inset(0px 5px 0px 5px);
	}
	80% {
		-webkit-clip-path : inset(0px 0px 0px 0px);
		clip-path : inset(0px 0px 0px 0px);
	}
	100% {
		height : 30px;
		width : 30px;
		opacity : 0.1;
		top : 35px;
		left : 10px;
	}
}
@keyframes outerlightbreathe {
	0% {
		height : 100px;
		width : 100px;
		top : -10px;
		left : -20px;
	}
	50% {
		height : 200px;
		width : 200px;
		top : -60px;
		left : -70px;
	}
	100% {
		height : 100px;
		width : 100px;
		top : -10px;
		left : -20px;
	}
}
.lantern {
	z-index : 999;
	position : absolute;
	height : 70px;
	width : 50px;
	transform-origin : top center;
	animation : shake 4s ease-in-out infinite;
}
.lanternBody {
	position : absolute;
	background-color : #756b3c;
	height : 70px;
	width : 50px;
	border-radius : 15px 15px 25px 25px;
}
.outerLight {
	z-index : -1;
	position : absolute;
	background-image:
		radial-gradient(rgba(117, 107, 60, 1.0), rgba(117, 107, 60, 0.0), rgba(117, 107, 60, 0.0));
	opacity : 0.5;
	border-radius : 50%;
	animation : outerlightbreathe 3s ease-in-out infinite;
}
.innerLight {
	position : absolute;
	background-image:
		radial-gradient(rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 0.0));
	border-radius : 50%;
	animation : innerlightbreathe 3s ease-in-out infinite;
}
center {
	position : absolute;
	top : 50%;
	left : 50%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.