CSS3 Animating Analogue Tower

Developer
Prashant Sani
Size
2,261 Kb
Views
20,240
  1. CSS3 Animating Analogue Tower Previews
  2. CSS3 Animating Analogue Tower HTML Codes
  3. CSS3 Animating Analogue Tower CSS Codes

How do I make an css3 animating analogue tower?

Small Experiment on Animating Towers. Can also be used as a symbol for Wifi, . What is a css3 animating analogue tower? How do you make a css3 animating analogue tower? This script and codes were developed by Prashant Sani on 15 November 2022, Tuesday.

CSS3 Animating Analogue Tower Previews
IQ Test

CSS3 Animating Analogue Tower - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS3 Animating Analogue Tower</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="mainCircle">	<div class="inCrl1"></div>	<div class="inCrl2"></div>	<div class="inCrl3"></div>	<div class="inCrl4"></div>	<div class="inCrl5"></div>	<div class="inCrl6"></div>	<div class="inCrl7"></div>
</div>
<div class="tower"></div>
</body>
</html>

CSS3 Animating Analogue Tower - Script Codes CSS Codes

*{margin:0;padding:0}
html, body{	position: relative;	background-color: #333;
}
.mainCircle div,
.mainCircle{	position: absolute;	border: 1px solid #888;	-webkit-border-radius: 200px; -moz-border-radius: 200px;	border-radius: 200px;
}
.mainCircle{	margin: 0px auto;	width: 300px;	height: 300px;	border: none;	top: 100px;	left: 100px;	z-index: 10;	overflow: hidden;
}
.mainCircle:before,
.mainCircle:after{	content: "";	width: 0;	height: 0;	position: absolute;	left: 0;	border-right: 151px solid transparent;	border-left: 151px solid transparent;	z-index: 10;
}
.mainCircle:before{	top: 0;	border-top: 150px solid #333;
}
.mainCircle:after{	bottom: 0;	border-bottom: 150px solid #333;
}
.mainCircle div{	top: 0;	left: 0;	width: 100%;	height: 100%;	opacity: 0;	-webkit-animation-name: inCrlAnim; -moz-animation-name: inCrlAnim;	-ms-animation-name: inCrlAnim; -o-animation-name: inCrlAnim;	animation-name: inCrlAnim;	-webkit-animation-duration: 3.5s; -moz-animation-duration: 3.5s;	-ms-animation-duration: 3.5s; -o-animation-duration: 3.5s;	animation-duration: 3.5s;	-webkit-animation-timing-function: linear; -moz-animation-timing-function: linear;	-ms-animation-timing-function: linear; -o-animation-timing-function: linear;	animation-timing-function: linear;	-webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite;	-ms-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;	animation-iteration-count: infinite;
}
.inCrl1{	-webkit-animation-delay: 3.5s; -moz-animation-delay: 3.5s;	-ms-animation-delay: 3.5s; -o-animation-delay: 3.5s;	animation-delay: 3.5s;
}
.inCrl2{	-webkit-animation-delay: 3s; -moz-animation-delay: 3s;	-ms-animation-delay: 3s; -o-animation-delay: 3s;	animation-delay: 3s;
}
.inCrl3{	-webkit-animation-delay: 2.5s; -moz-animation-delay: 2.5s;	-ms-animation-delay: 2.5s; -o-animation-delay: 2.5s;	animation-delay: 2.5s;
}
.inCrl4{	-webkit-animation-delay: 2s; -moz-animation-delay: 2s;	-ms-animation-delay: 2s; -o-animation-delay: 2s;	animation-delay: 2s;
}
.inCrl5{	-webkit-animation-delay: 1.5s; -moz-animation-delay: 1.5s;	-ms-animation-delay: 1.5s; -o-animation-delay: 1.5s;	animation-delay: 1.5s;
}
.inCrl6{	-webkit-animation-delay: 1s; -moz-animation-delay: 1s;	-ms-animation-delay: 1s; -o-animation-delay: 1s;	animation-delay: 1s;
}
.inCrl7{	-webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s;	-ms-animation-delay: 0.5s; -o-animation-delay: 0.5s;	animation-delay: 0.5s;
}
@-webkit-keyframes inCrlAnim {	0% { -webkit-transform: scale(0); opacity: 0; }	50% { opacity: 1 }	100% { -webkit-transform: scale(1); opacity: 0; }
}
@-moz-keyframes inCrlAnim {	0% { -moz-transform: scale(0); opacity: 0; }	50% { opacity: 1 }	100% { -moz-transform: scale(1); opacity: 0; }
}
@-o-keyframes inCrlAnim {	0% { -o-transform: scale(0); opacity: 0; }	50% { opacity: 1 }	100% { -o-transform: scale(1); opacity: 0; }
}
@-ms-keyframes inCrlAnim {	0% { -ms-transform: scale(0); opacity: 0; }	50% { opacity: 1 }	100% { -ms-transform: scale(1); opacity: 0; }
}
@keyframes inCrlAnim {	0% { transform: scale(0); opacity: 0; }	50% { opacity: 1 }	100% { transform: scale(1); opacity: 0; }
}
.tower{	position: absolute;	top: 248px;	left: 210px;	width: 80px;	height: 200px;	overflow: hidden;	z-index: 11;
}
.tower:before,
.tower:after{	content: '';	width: 10px;	height: 100%;	position: absolute;	top: -5px;	background-color: #888;	-webkit-transform-origin: center bottom; -moz-transform-origin: center bottom;	-ms-transform-origin: center bottom; -o-transform-origin: center bottom;	transform-origin: center bottom;
}
.tower:before{	left: 0;	-webkit-transform: rotate(10deg); -moz-transform: rotate(10deg);	-ms-transform: rotate(10deg); -o-transform: rotate(10deg);	transform: rotate(10deg);
}
.tower:after{	right: 0;	-webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);	-ms-transform: rotate(-10deg); -o-transform: rotate(-10deg);	transform: rotate(-10deg);
}
CSS3 Animating Analogue Tower - Script Codes
CSS3 Animating Analogue Tower - Script Codes
Home Page Home
Developer Prashant Sani
Username Prashantsani
Uploaded November 15, 2022
Rating 3
Size 2,261 Kb
Views 20,240
Do you need developer help for CSS3 Animating Analogue Tower?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Prashant Sani (Prashantsani) Script Codes
Name
Christ the Redeemer
CSS3 Jack in a Box
Flower Petal Animation
A Pen by Prashant Sani
Vintage Television Set Noise Effect in CSS3
CSS Off Entry
Digital Christmas Tree
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!