Skip to main content

Notification Bell Icon Ripple Animation | Html And Css

Notification-Bell-Icon-Ripple-Animation-Using-Html-And-Css

Notification Bell Icon Ripple Animation Using Html And Css

How to create a notification bell icon ripple animation using HTML and CSS. In this tutorial, we will create a notification bell icon that when hovered, the icon will ripple.

This article is for beginners who want to learn css animation properties very well. We create this by just using html and css, there is no javascript just simple html, css. You can add this effect on the bell icon when the user clicks on it, you have to add just one class(ripple class which contains ripple animation) with the help of javascript when the user clicks on that bell icon. This animation has an easy css effect. You can find this animation in the youtube bell icon.

We have another "Cart Notification Icon Animation Using Html Css Only" you visit that also. Apart from this, we have a number of articles on button animations, you can check out that playlist also.

You can read more about web development from this playlist.

 

 


 

HTML:

Let's start with the boilerplate of the HTML document which you can see below.

<!DOCTYPE html>
<html>
<head>
 <title>Notification Bell Icon Ripple Animation | Rustcode</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>

 Body Content 

</body>
</html>


Let's include "remixicon" icon file link using CDN link. (remixicon is an open-source icon library that provides various icons free of cost. It is similar to "font-awesome" but font-awesome does not provide all icons free of cost.)

https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css


It time to inlcude all the body content in the html document.

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
 <link rel="stylesheet" href="style.css">
 <title>Notification Bell Icon Ripple Animation | Rustcode</title>
</head>
<body>

<div class="pulse">
  <i class="ri-notification-2-fill bell"></i>
</div>

</body>
</html>

 


 

 


 

CSS:

.pulse{
  height: 50px;
  width: 50px;
  position: absolute;
  margin: auto;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: linear-gradient(#8A82FB, #407ED7);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: whitesmoke;
}

.pulse::after,
.pluse::before{
  content: "";
  position: absolute;
  height: 100%;
  width: 100%;
  background: #8A82FB;
  border-radius: 50%;
  z-index: -1;
  opacity: 0.7;
}

.pulse::before{
  animation: pulse 2s ease-out infinite;
}

.pulse::after{
  animation: pulse 2s ease-out infinite;
}

@keyframes pulse {
  100%{
    transform: scale(2);
    opacity: 0;
  }
}

.bell{
  animation: shake 0.1s ease-out 5;
}

@keyframes shake {
  0%{
    transform: translateX(0px);
  }
  25%{
    transform: translateX(-4px);
  }
  50%{
    transform: translateX(0px);
  }
  75%{
    transform: translateX(4px);
  }
  100%{
    transform: translateX(0px);
  }
}

 


 

 


 

Output:

Notification-Bell-Icon-Ripple-Animation-Using-Html-And-Css-Output

 


 

 


 

Youtube Video:

We also made a youtube video for "Notification Bell Icon Ripple Animation Using Html And Css", if you want to watch and want to learn every step of this design.

 


 

Source Code:

Before jumping in to download the source code. First, write this code yourself and then you can cross-check it with reference code.

 


 

 

Comments