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.
*, 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
}
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.
Post a Comment
Thank you
Learning robo team