Ad Code

Design Netflix Logo Using HTML and CSS | Web Designing.

Ashish Kumar December 17, 2022

Welcome to Codingfizz,

Designing Netflix logo using HTML and CSS with animation. First, we need to create two files one is an index file with a .html extension and another is a style with a .css extension.

You should have knowledge of CSS animation transformation and transition. That are all advanced CSS concepts. By the way, the code is very simple to understand.

Netflix Logo Using HTML and CSS 


Html Code

The first file is an HTML file that name is index.html.
<!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">
    <title>Netflix</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="netflix">
        <span class="left"></span>
        <span class="center"></span>
        <span class="right"></span>
    </div>
</body>
</html>

CSS Code

The second file is a CSS file that name is style.css.
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background: #000;
}
.netflix{
    width: 150px;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* background: #fff; */
}
.netflix span{
    width: 50px;
    height: 0;
    background: #db0001;
    position: absolute;
}
.left{
    left: 0;
    bottom: 0;
    animation: anim 1s linear forwards;
    animation-delay: 1s;
}
.center{
    top:0;
    left: 0;
    transform: skewX(22deg);
    transform-origin: top left;
    box-shadow: 0 0 50px #000;
    z-index: 2;
    animation: anim 1s linear forwards;
    animation-delay: 2s;
}
.right{
    right: 0;
    bottom: 0;
    animation: anim 1s linear forwards;
    animation-delay: 3s;
}
.netflix::after{
    content: '';
    width: 120%;
    height: 20px;
    border-radius: 50%;
    background: #000;
    position: absolute;
    left: -10%;
    bottom: -10px;
    z-index: 5;
}

@keyframes anim {
    100%{
        height:100%;
    }
}
You get a clear understanding of everything in this article. If you want to ask anything. Please feel free to contact us by commenting down below. Thank you

Post a Comment

0 Comments

Ad Code