Phone Pulse Animation code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Pulse Animation</title> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="pulse"> <i class="fa fa-phone" style="font-size:48px;color:white"></i> </div> </body> </html>
2.style.css:
body { margin: 0; padding: 0; background: black; } .pulse { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 80px; height: 80px; background: green; color: white; border-radius: 50%; text-align: center; line-height: 84px; font-size: 48px; } .pulse::before, .pulse::after { content: ''; display: block; position: absolute; border: 50%; border: 1px solid greenyellow; left: -20px; right: -20px; top: -20px; bottom: -20px; border-radius: 50%; animation: animate 1.5s linear infinite; opacity: 0; } .pulse::after { animation-delay: 0.5s; } @keyframes animate { 0% { transform: scale(0.5); opacity: 0; } 50% { opacity: 1; } 100% { transform: scale(1.2); opacity: 0; } }
