CSS Light House

CSS LIGHT HOUSE

HTML:

	<html>

	<head>
	<title></title>
	</head>

	<body>
	<div class="all">
	<div class="light_house">
	<div class="top1"></div>
	<div class="top2"></div>
	<svg width="200px" height="380px" class="svg1">
	<defs>
	<linearGradient id="grad1" x1="20%" y1="54%" x2="30%" y2="90%" spreadMethod="repeat">
	<stop offset="50%" style="stop-color:#E37F36;stop-opacity:1" />
	<stop offset="50%" style="stop-color:#B1BEE6;stop-opacity:1" />
	</linearGradient>
	</defs>
	<polygon points="103 60 ,93.5 340 ,188.5 340 ,178 60 " style="fill:url(#grad1);"></polygon>
	</svg>
	</div>
	<div class="cloud1"></div>
	<div class="cloud2"></div>
	<div class="cloud3"></div>
	<div class="Big_star1"></div>
	<div class="Big_star2"></div>
	<div class="small_star1"></div>
	<div class="small_star2"></div>
	<div class="small_star3"></div>
	<svg width="600px" height="115px" class="svg2">

	<ellipse cx="300" cy="150" rx="275"ry="120" style="fill:green"></ellipse>
	</svg>
	</div>
	</body>

	</html>

view raw light_house.html hosted with ❤ by GitHub

CSS:

	body {
	background-color: #cccc;
	}

	.all {
	position: absolute;
	top: 55%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: -webkit-linear-gradient(
	bottom,
	transparent 155px,
	#0726c0 155px,
	skyblue
	);
	width: 600px;
	height: 600px;
	border-radius: 600px;
	overflow: hidden;
	}
	.light_house {
	position: relative;
	left: 250px;
	bottom: -5px;
	z-index: 5;
	}

	.top1 {
	width: 80px;
	height: 80px;
	border-radius: 80px;
	background: linear-gradient(red 0px 45px, transparent 41px 80px);
	}

	.top1:before {
	position: absolute;
	content: " ";
	width: 95px;
	height: 10px;
	border-radius: 10px;
	background-color: red;
	top: 45px;
	left: -7px;
	}

	.top1:after {
	position: absolute;
	content: " ";
	width: 0px;
	height: 0px;
	border-radius: 80px;
	border-top: 37px solid transparent;
	border-bottom: 37px solid transparent;
	border-left: 37px solid transparent;
	border-right: 37px solid silver;
	transform: rotate(-44deg);
	top: 4px;
	left: 3px;
	opacity: 0.7;
	}

	.top2 {
	width: 80px;
	height: 45px;
	background: -webkit-radial-gradient(left, #e2d00c 40px, #d3a701 80px);
	position: absolute;
	top: 55px;
	z-index: 2;
	}

	.top2:before {
	content: " ";
	position: absolute;
	width: 95px;
	height: 35px;
	background-color: red;
	top: 45px;
	left: -6.5px;
	}

	.top2:after {
	position: absolute;
	content: " ";
	width: 0px;
	height: 43px;
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 300px solid yellow;
	border-radius: 30px;
	left: -260px;
	top: -29px;
	opacity: 0.5;
	animation-name: ok1;
	animation-iteration-count: infinite;
	animation-delay: 1s;
	animation-duration: 5s;
	transform-origin: right;
	}

	@keyframes ok1 {
	0% {
	transform: scaleX(1);
	}
	25% {
	transform: scaleX(-1);
	}
	50% {
	transform: scaleX(-1);
	}
	75% {
	transform: scaleX(1);
	}
	100% {
	transform: scaleX(1);
	}
	}

	.svg1 {
	position: absolute;
	left: -99.5px;
	top: 75px;
	}

	.cloud1 {
	position: absolute;
	width: 110px;
	height: 30px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 380px;
	z-index: 4;
	animation-name: ok2;
	animation-iteration-count: infinite;
	animation-duration: 30s;
	animation-timing-function: linear;
	}

	@keyframes ok2 {
	0% {
	transform: translateX(0px);
	}
	100% {
	transform: translateX(-300px);
	}
	}

	.cloud1:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 50px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 50px;
	top: -20px;
	}

	.cloud1:after {
	position: absolute;
	content: " ";
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 25px;
	top: -40px;
	}

	.cloud2 {
	position: absolute;
	width: 110px;
	height: 30px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 70px;
	top: 200px;
	z-index: 1;
	animation-name: ok3;
	animation-iteration-count: infinite;
	animation-duration: 20s;
	animation-timing-function: linear;
	}

	@keyframes ok3 {
	0% {
	transform: translateX(0px);
	}
	100% {
	transform: translateX(300px);
	}
	}

	.cloud2:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 50px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 50px;
	top: -20px;
	}

	.cloud2:after {
	position: absolute;
	content: " ";
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: #0b4fd3;
	left: 25px;
	top: -40px;
	}

	.cloud3 {
	position: absolute;
	width: 110px;
	height: 30px;
	border-radius: 100px;
	background-color: #3799ff;
	left: 170px;
	top: 300px;
	z-index: 20;
	animation-name: ok4;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	animation-timing-function: linear;
	}

	@keyframes ok4 {
	0% {
	transform: translateX(0px);
	}
	100% {
	transform: translateX(-300px);
	}
	}

	.cloud3:before {
	position: absolute;
	content: " ";
	width: 70px;
	height: 50px;
	border-radius: 100px;
	background-color: #3799ff;
	left: 50px;
	top: -20px;
	}

	.cloud3:after {
	position: absolute;
	content: " ";
	width: 60px;
	height: 60px;
	border-radius: 100px;
	background-color: #3799ff;
	left: 25px;
	top: -40px;
	}

	.Big_star1 {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: white;
	position: absolute;
	left: 80px;
	top: 170px;
	}

	.Big_star1:before {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: white;
	position: absolute;
	content: " ";
	left: 400px;
	top: 150px;
	}

	.Big_star1:after {
	content: " ";
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: white;
	position: absolute;
	left: 270px;
	top: -40px;
	}

	.Big_star2 {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: white;
	position: absolute;
	left: 130px;
	top: 300px;
	}

	.Big_star2:before {
	width: 6px;
	height: 6px;
	border-radius: 6px;
	background-color: white;
	position: absolute;
	content: "";
	left: 250px;
	top: -30px;
	}

	.Big_star1,
	.Big_star2,
	.Big_star1:after,
	.Big_star1:before,
	.Big_star2:before {
	box-shadow: 0px 0px 0px 2px gray, 0px 0px 0px 3px silver;
	}

	.small_star1 {
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: red;
	position: absolute;
	left: 120px;
	top: 140px;
	animation-name: s1;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	}

	@keyframes s1 {
	0% {
	background-color: transparent;
	}
	25% {
	background-color: white;
	}
	50% {
	background-color: transparent;
	}
	75% {
	background-color: white;
	}
	100% {
	background-color: transparent;
	}
	}

	.small_star1:before {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 70px;
	top: 40px;
	animation-name: s2;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	}

	@keyframes s2 {
	0% {
	background-color: white;
	}
	25% {
	background-color: transparent;
	}
	50% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	100% {
	background-color: white;
	}
	}

	.small_star1:after {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 0px;
	top: 100px;
	animation-name: s3;
	animation-iteration-count: infinite;
	animation-duration: 8s;
	}

	@keyframes s3 {
	0% {
	background-color: white;
	}
	25% {
	background-color: transparent;
	}
	50% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	100% {
	background-color: white;
	}
	100% {
	background-color: transparent;
	}
	}

	.small_star2 {
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	position: absolute;
	left: 70px;
	top: 300px;
	animation-name: s4;
	animation-iteration-count: infinite;
	animation-duration: 7s;
	}

	@keyframes s4 {
	0% {
	background-color: white;
	}
	25% {
	background-color: transparent;
	}
	50% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	90% {
	background-color: white;
	}
	100% {
	background-color: transparent;
	}
	}

	.small_star2:before {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 100px;
	top: 50px;
	animation-name: s5;
	animation-iteration-count: infinite;
	animation-duration: 10s;
	}

	@keyframes s5 {
	0% {
	background-color: white;
	}
	15% {
	background-color: transparent;
	}
	30% {
	background-color: white;
	}
	45% {
	background-color: transparent;
	}
	60% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	90% {
	background-color: white;
	}
	100% {
	background-color: transparent;
	}
	}

	.small_star2:after {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 300px;
	animation-name: s6;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	}

	@keyframes s6 {
	0% {
	background-color: white;
	}
	20% {
	background-color: transparent;
	}
	40% {
	background-color: white;
	}
	60% {
	background-color: transparent;
	}
	80% {
	background-color: white;
	}
	100% {
	background-color: transparent;
	}
	}

	.small_star3 {
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	position: absolute;
	left: 380px;
	top: 50px;
	animation-name: s7;
	animation-iteration-count: infinite;
	animation-duration: 5s;
	}

	@keyframes s7 {
	0% {
	background-color: transparent;
	}
	20% {
	background-color: white;
	}
	40% {
	background-color: transparent;
	}
	60% {
	background-color: white;
	}
	80% {
	background-color: transparent;
	}
	100% {
	background-color: white;
	}
	}

	.small_star3:before {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 40px;
	top: 90px;
	animation-name: s8;
	animation-iteration-count: infinite;
	animation-duration: 15s;
	}

	@keyframes s8 {
	0% {
	background-color: white;
	}
	25% {
	background-color: transparent;
	}
	50% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	100% {
	background-color: white;
	}
	}

	.small_star3:after {
	position: absolute;
	content: " ";
	width: 5px;
	height: 5px;
	border-radius: 5px;
	background-color: white;
	left: 150px;
	top: 180px;
	animation-name: s9;
	animation-iteration-count: infinite;
	animation-duration: 15s;
	}
	@keyframes s9 {
	0% {
	background-color: white;
	}
	25% {
	background-color: transparent;
	}
	50% {
	background-color: white;
	}
	75% {
	background-color: transparent;
	}
	100% {
	background-color: white;
	}
	}
	.svg2 {
	position: relative;
	top: 250px;
	}