Glowing windows logo animation using html and css
Creating a glowing windows logo animation using html css
 |
| windows 10 Animation |
Hello geeks, I'm Mr.Unofficial here by there for you with a new article on creating a glowing windows logo animation using html and css.
Now let's get into the code.
 |
| Font awesome cdn |
Before going to the code we have to do a small reqirements regarding the appearance of the icon, here we are not going to create the windows logo by doing a heavy code rather than that we are simply going to design the icon which was hosted from the fontawesome cdn icons.
 |
| Tool kit script link |
For that we have to go to the official site of the fontawesome and ther you have to subscribe for the fontawesome using your gmail and then verify your gmail. then come to the site and there you we can see an font awesome script regarding the using of the kit tools of the fontawesome.
Thats it ,now we can use any kind of the icons from the font awesome site ,just like " fa fa-facebook " .
step 1 : Wrting the basic html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>step 2: Creating a windows icon
For creting a windows icon as said above ,go to the fontaswesome site and look for the windows icon and just copy the name of the fa code.
Now we have to create a div and have to specify the icon in a <i> tag as a class as shown below .
<body>
<div id="main">
<i class="fa fa-lightbulb"></i>
</div>
<center>
<h2>Welcome Home</h2>
</center>
</div>
</body>step 3: styling the icon and have to create an glow effect
For that we have to justify the content at the center align items at center and have to set the background to black and the font color to #fff. Now select the main named id nd now set the text shadow to the desired custom color and then after we can change the color by a blinking efect.
As we created the logo here we have to set the height using font size and and we have to set top amd left margin measurements and also set the translate to equal signs as shown belowFor styling the css the whole code should be on the external css or in an internal cssof the html document.
<style>
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');
body{
display: flex;
align-items: center;
justify-content: center;
margin: 0;
background: black;
color: white;
min-height: 90vh;
}
#main{
font-size: 12em;
text-shadow: 0 0 30px #269bdf,
0 0 70px #269bdf,
0 0 170px #269bdf;
transition: 0.8s;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
step 4: styling the header tag using css
h2{
font-family: 'Kaushan Script', cursive;
margin-top: 70px;
position: absolute;
top: 68%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
align-items: flex-end;
justify-content: end;
font-weight: bold;
text-transform: capitalize;
font-size: 62px;
}
step 5: Animation the glow effect using the java script
Now we are going to make an glowing animation using the js script .For that we are going to set theconst as colors and give the colors list here by the color codes. And we have to set an intrerval and here we have to call the div by using document.getElementById and we have to change the text shadow by calling the color codes with an ratios of 30 , 70 , and 170 px .
<script>
const colors = ['rgb(247, 3, 3) ', 'rgb(3, 170, 247)', '#00ff00', 'rgb(255, 255, 8)', 'rgb(255, 8, 70)','rgb(226, 8, 255)']; var i = 0;
setInterval(() => {
document.getElementById('main').style.textShadow = `0 0 30px ${colors[i]}, 0 0 70px ${colors[i]}, 0 0 160px ${colors[i]}`
i += 1
if (i == colors.length) {
i = 0
}
}, 1000)
</script>
Thats it guys . And just compile the code and see the result and you will be amazed by the glowing animation of the windows icon.
If you are interested in learning more about technology and coding tips and tricks ,join in our official whatsapp group with this link provided below.
click here to join in our whatsapp group.
Yours Dinesh
Thanks brother
ReplyDeleteGood bro
ReplyDeleteIt was a very good post indeed. I thoroughly enjoyed reading it in my lunch time. Will surely come and visit this blog more often. Thanks for sharing. check,
ReplyDeletehttps://sites.google.com/site/ytviewsindiabuy/ Pet games are very attractive for kids and teenagers especially. Kids like to play all sorts of games with cats and dogs. They like to take care of animals, give them food to eat, play with their virtual pet and sometimes watch them grow. Most popular pets are dogs and cats, but players can find online games with horses, ponies, rabbits, hamsters, guinea pigs, lizards, turtles, fishes, birds and even frogs.
ReplyDeletehttps://twitchviral.com/ From time immemorial, people have given prominent importance to games due to various positive factors. Moreover, it is a very common phenomenon to find people playing games. Gaming activities can be categorised in two forms i.e., indoor and outdoor. In this regard, we can say swimming, table tennis, chess, cricket, badminton and hockey are the most common ones. But the twist in the tale is that due to the hectic life-style of the people, the preferences of the people are also changing.
ReplyDeleteThe article posted was very informative and useful. You people are doing a great job. Keep going. visit this site
ReplyDelete