How to build a Pulse Animation using HTML ,CSS | Pulse Animation Css
Welcome to today’s tutorial. Today we are going to create a Pulse Animation. For this, we are going to use HTML, CSS and Javascript.
You need basic knowledge of CSS for this project. This tutorial is well suited for CSS intermediates. Let us get started with the project.
PULSE ANIMATION:-
Live server:-
Before moving forward to the code first of all we will see the live sever of the code so you can see how it is working on clicking the button.
See the Pen Untitled by Himanshu Singh (@himanishu) on CodePen.
HTML:-
Pulse animation is commonly used to draw the attention of a user. In this snippet, we are going to create pulse effect animation in CSS. At First, we need to create two div tags where one is placed inside another. The container div will be named as the wrapper. The div inside that will be named as a box.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div class="wrapper">
<div class="box">
</div>
</div>
</body>
</html>
CSS:-
body {
margin: 0;
padding: 0;
background: #000;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box {
width: 100px;
height: 100px;
background: cornflowerblue;
border-radius: 50%;
text-align: center;
line-height: 130px;
animation: animate 2s linear infinite;
cursor: pointer;
}
@keyframes animate {
0% {
box-shadow: 0 0 0 0 cornflowerblue;
}
40% {
box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);
}
80% {
box-shadow: 0 0 0 50px rgba(255, 254, 67, 0);
}
100% {
box-shadow: 0 0 0 rgba(255, 254, 67, 0);
}
}
I hope hoped loved this blog and learnt many things at a place please let us know your review in the comment section if you liked it please comment below as it will give us motivation to create more blogs.