Hello guys today we will create Netflix logo using html css
First we need to create two files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html> <html> <head> <title>Netflix Logo Using CSS</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="logo"> <div class="netflix"> <span></span> <span></span> <span></span> </div> </div> </body> </html>
Step:2
Then we need to add code for style.css which code i provide in below screen.
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #000;
}
.netflix {
position: relative;
width: 360px;
height: 520px;
overflow: hidden;
transform: scale(.5);
}
.netflix:before {
content: '';
position: absolute;
left: 0;
bottom: -100px;
width: 100%;
height: 120px;
background: #000;
z-index: 2;
border-top-left-radius: 100%;
border-top-right-radius: 100%;
transform: scaleX(1.5);
}
.netflix:after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 400%;
height: 100%;
background: linear-gradient(to right, transparent, #000, #000);
z-index: 3;
animation: animate 5s linear forwards;
}
@keyframes animate {
0% {
right: 0;
}
100% {
right: -500%;
}
}
.netflix span {
position: absolute;
top: 0;
width: 120px;
background: #fff;
}
.netflix span:nth-child(1) {
background: #b00612;
left: 0;
animation: BottomToTop 1s linear forwards;
}
@keyframes BottomToTop {
from {
height: 0%;
}
to {
height: 100%;
}
}
.netflix span:nth-child(2) {
background: #e50815;
left: 116px;
z-index: 1;
transform-origin: top-left;
transform: skewX(24deg);
box-shadow: 0 0 40px rgba(0,0,0,1);
animation: BottomToTop 1s linear forwards;
animation-delay: 1s;
}
.netflix span:nth-child(3) {
background: #b00612;
right: 10px;
animation: BottomToTop 1s linear forwards;
animation-delay: 2s;
}