Glowing Card Animation using HTML & CSS

Glowing Card Animation using HTML & CSS

Hello developers, today in this blog you will learn to create a Glowing Card Animation using HTML & CSS.

The effect is used for applying glowing texture in an object or around the object. The glow effect displays a bright colored outline around a card and the text in the card. The glow effect was mainly used to attract visitors to the sentence or the card.

In this blog (Glowing Card Animation), on the webpage, there is a card with a random glowing effect around a card, the color of the glow effect changes as per the given color. There is a text "Learning Robo" inside a card with glow animation around every letter. The glowing effect around the card changes randomly whereas the text will glow every two seconds. Can vary the time as per the need. This animation was made by using the CSS @keyframes property.

The source code of this Glowing Card Animation using HTML & CSS is given below, if you want the source code of this program, you can copy it. You can use this Glowing Card Animation using HTML & CSS on your projects.

Glowing Card Animation [Source Code]

To make this website (Glowing Card Animation), you need to create two files: an HTML file & a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Glowing Card || learningrobo</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="myview"> <ul> <li>Learning robo</li> <li>Learning robo</li> <li>Learning robo</li> </ul> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤</span> by <a href="https://www.learningrobo.com/">Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and, remember that you have to create a file with a .css extension.


*, body{
   padding: 0px;
   height: 0px;
}
body{
background-color: #000;
}
.myview{
 border-radius: 8px;
 position: relative;
 margin: 70px auto 0;
 width: 400px;
 height: 300px;
 background-image: linear-gradient(-45deg, #000,#111);
 text-align: center;
}
.myview ul{
 font-family: 'Kalam', cursive;
 font-size: 80px;
 list-style: none;
 position: relative;
}
.myview ul li:nth-child(1){
 color: #0000ff;
 filter: blur(10px);
 animation: child1 2s alternate infinite;    
}
.myview ul li:nth-child(2){
 color: #00ffff;
 filter: blur(5px);
 animation: child2 2s alternate infinite;
 }
            
.myview ul li:nth-child(3){
  color: #000;
  filter: blur(0px);     
}
@keyframes child1
{
 0%, 100%{
 filter: blur(10px);
}
50%{
  filter: none;
 }
 }
 @keyframes child2
 {
  0%, 100%{
 filter: blur(5px);
  }
 50%{
 filter: blur(1px);
 }
 }
.myview:before, .myview:after{
 content: '';
 border-radius: 10px;
 position: absolute;
 left: -2px;
 top: -2px;
 width: calc(100% + 4px);
 height: calc(100% + 4px);
 background-image: linear-gradient(45deg, #ff0000, #ffff00, #00ff00,  #0000ff, #00ffff);
                background-size: 400%;
z-index: -1;
 animation: move 10s alternate infinite;
}
.myview:after{
filter: blur(10px);
}
@keyframes move{
0%, 100%{
background-position: 0 0;
 }
 50%{
 background-position: 100% 0;
 }
}

.credit a{
  text-decoration: none;
  color: #00ff00;
  font-weight: 800;
  }
  
  .credit {
      text-align: center;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin: 10px;
    color:#FFF
  }
We hope you would like this Glowing Card Animation using HTML & CSS.

Thank you for reading our blog. If you face any problem in creating this Glowing Card Animation using HTML & CSS, then contact us or comment us. We’ll try to provide a solution to your problem as soon as possible.

Thank you
Learning robo team

إرسال تعليق

Thank you
Learning robo team

Post a Comment (0)

أحدث أقدم
Learning Robo says...
code copied
Welcome