Pulse Effect Code HTML & CSS
Paste this code in html file
<html>
<head><title>Pulse Effect</title></head>
<link href="pulse_effect.css" rel="stylesheet" type="text/css">
<body>
<div class="pulse">
<i class="fa fa-mobile" aria-hidden="true" style="color:green"></i>
</div>
</body>
</html>
Paste this code in CSS file
.pulse{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 80px;
height: 65px;
background-color: red;
color: green;
border-radius: 50%;
text-align: center;
line-height: 84px;
padding-top: 10px;
}
.pulse:hover:before, .pulse:hover:after{
content: '';
display: block;
position: absolute;
border: 50%;
border: 3px solid red;
left: -20px;
right: -20px;
top: -20px;
bottom: -20px;
animation: animate 1.5s linear infinite;
border-radius: 50%;
}
@keyframes animate{
0%{
transform: scale(0.5);
opacity: 0;
}
50%{
opacity: 1;
}
100%{
transform: scale(1.2);
opacity: 0;
}
}
No comments:
Post a Comment