Create Animated Logo Using HTML And CSS
Hello Friends, Today in this blog you’ll learn how to create a Animated Logo Design using HTML & CSS . I already shared many blogs on web design stuff like [Navigation Bar, Cards, Image Slider, Owl Carousel, Buttons, and many more]
Youtube Video Link:
Animated Logo [Source Codes]
You need to create Two Files: HTML File and CSS File. After creating these files just paste the following codes into your file.
First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.
<!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">
<link rel="stylesheet" href="/style.css">
<title>Animated Logo</title>
</head>
<body>
<div class="logo">
<span class="left-side"></span>
<span class="center-side"></span>
<span class="right-side"></span>
</div>
</body>
</html>
Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #000;
}
.logo{
width: 150px;
height: 250px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.logo span{
width: 50px;
height: 0;
background: #db0001;
position: absolute;
}
.left-side{
left: 0;
bottom: 0;
animation: animate 1s linear forwards;
animation-delay: 1s;
}
.center-side{
top: 0;
left: 0;
transform: skewX(22deg);
transform-origin: top left;
box-shadow: 0 0 50px #000;
z-index: 2;
animation: animate 1s linear forwards;
animation-delay: 2s;
}
.right-side{
right: 0;
bottom: 0;
animation: animate 1s linear forwards;
animation-delay: 3s;
}
.logo::after{
content: '';
width: 120%;
height: 20px;
border-radius: 50%;
background: #000;
position: absolute;
left: -10%;
bottom: -10%;
z-index: 5;
}
@keyframes animate{
100%{
height: 100%;
}
}
Tags:
Glowing Effect