How to make a pulse effect

In this article, I’ll teach you how to make a pulse effect on an image.

HTML Code

First, we add our image inside <img> tag.

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta h…


This content originally appeared on DEV Community and was authored by Yigit S

In this article, I'll teach you how to make a pulse effect on an image.

HTML Code

  • First, we add our image inside <img> tag. 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulse Effect</title>
</head>
<body>

    <img class="moonPulse" src="https://i.pinimg.com/564x/a1/01/e2/a101e22fc458c1110d418ee309f240c8.jpg"
alt="moon pic"/>

</body>
</html>

CSS Code

  • Styling the body 
  body{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 5em;
    background: #000;
}
  • Styling the image 
.moonPulse{
    animation: pulse 1s infinite;
    border-radius: 50%;
    width: 20em;
}

Finally, adding pulse effect animation 

 @keyframes pulse{
      from{
        box-shadow: 0 0 0 0 rgba(198, 182, 179, 0.85);
      }

      to{
        box-shadow: 0 0 0 30px rgba(201, 48, 48, 0);
      }
  }

Final Result

I hope you find this tutorial useful. See you on the next article.
Here's the Source Code on GitHub
Here's the YouTube Video where I code it from scratch.
Check it out on CodePen

Follow me on


This content originally appeared on DEV Community and was authored by Yigit S


Print Share Comment Cite Upload Translate Updates
APA

Yigit S | Sciencx (2022-01-02T12:57:06+00:00) How to make a pulse effect. Retrieved from https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/

MLA
" » How to make a pulse effect." Yigit S | Sciencx - Sunday January 2, 2022, https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/
HARVARD
Yigit S | Sciencx Sunday January 2, 2022 » How to make a pulse effect., viewed ,<https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/>
VANCOUVER
Yigit S | Sciencx - » How to make a pulse effect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/
CHICAGO
" » How to make a pulse effect." Yigit S | Sciencx - Accessed . https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/
IEEE
" » How to make a pulse effect." Yigit S | Sciencx [Online]. Available: https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/. [Accessed: ]
rf:citation
» How to make a pulse effect | Yigit S | Sciencx | https://www.scien.cx/2022/01/02/how-to-make-a-pulse-effect/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts