Pulse animation ribbe

Developer
Alex Konstantinov
Size
2,103 Kb
Views
14,168
  1. Pulse animation ribbe Previews
  2. Pulse animation ribbe HTML Codes
  3. Pulse animation ribbe CSS Codes
  4. Pulse animation ribbe JS Codes

How do I make an pulse animation ribbe?

Pulse animation ribbe. What is a pulse animation ribbe? How do you make a pulse animation ribbe? This script and codes were developed by Alex Konstantinov on 13 December 2022, Tuesday.

Pulse animation ribbe Previews
IQ Test

Pulse animation ribbe - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pulse animation ribbe</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="main">	<div class="round" id="round"></div>	<div class="circle">	<span></span>	<span></span>	<span></span>	<span></span>	</div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pulse animation ribbe - Script Codes CSS Codes

html,body{	width: 100%;	height: 100%;
}
.main{	width: 100%;	height: 100%;	overflow: hidden;	position: relative;
}
.round{	width: 100px;	height: 100px;	background-color: gold;	margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0;	border-radius: 100%;	cursor: pointer;	-webkit-transition: all 0.5s ease;	transition: all 0.5s ease;	z-index: 2;
}
.animate{	border-radius: 0%;	-webkit-transition: all 0.5s ease;	transition: all 0.5s ease;	-webkit-transform: scale(30); transform: scale(30);
}
.round:hover + .circle span{	-webkit-animation: circle 1.5s ease infinite; animation: circle 1.5s ease infinite;
}
.round:hover + .circle span:nth-of-type(2) { -webkit-animation: circle 1.5s ease infinite 0.5s; animation: circle 1.5s ease infinite 0.5s;
}
.round:hover + .circle span:nth-of-type(3) { -webkit-animation: circle 1.5s ease infinite 1s; animation: circle 1.5s ease infinite 1s;
}
.circle {	z-index: 1;
}
.circle span { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 0px; height: 0px; opacity: 0; border-radius:50%; border: 2px gold solid; -webkit-animation: circle 3s linear infinite; animation: circle 3s linear infinite;
}
.circle span:nth-of-type(2) { -webkit-animation: circle 3s linear infinite 1s; animation: circle 3s linear infinite 1s;
}
.circle span:nth-of-type(3) { -webkit-animation: circle 3s linear infinite 2s; animation: circle 3s linear infinite 2s;
}
@-webkit-keyframes circle { 0% { width: 90px; height: 90px; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; }
}
@keyframes circle { 0% { width: 90px; height: 90px; opacity: 1; } 100% { width: 200px; height: 200px; opacity: 0; }
}

Pulse animation ribbe - Script Codes JS Codes

$("#round").click(function() {	$(this).toggleClass("animate");
});
Pulse animation ribbe - Script Codes
Pulse animation ribbe - Script Codes
Home Page Home
Developer Alex Konstantinov
Username oxla
Uploaded December 13, 2022
Rating 3
Size 2,103 Kb
Views 14,168
Do you need developer help for Pulse animation ribbe?

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!

Alex Konstantinov (oxla) Script Codes
Name
Combined font-size and line-height lock, using pixel-based Media Queries
Iphone 5
Svg
Pirate pixel art css
A Pen by Alex Konstantinov
Size window
Loader wave
Svg
Cube Rotating Around
Drag resize rotate
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!