Netflix Intro Animation
Sachin K Chaurasiya
<div _="@=1762,dis=none"><div _="@=1763,dis=none"></div></div>
1
<div id="container">
2
<!-- Edit the letter attr to: N, E, T, F, L, I or X -->
3
<netflixintro letter="N">
4
<div class="helper-1">
5
<div class="effect-brush">
6
<span class="fur-31"></span>
7
<span class="fur-30"></span>
8
<span class="fur-29"></span>
9
<span class="fur-28"></span>
10
<span class="fur-27"></span>
11
<span class="fur-26"></span>
12
<span class="fur-25"></span>
13
<span class="fur-24"></span>
14
<span class="fur-23"></span>
15
<span class="fur-22"></span>
16
<span class="fur-21"></span>
17
<span class="fur-20"></span>
18
<span class="fur-19"></span>
19
<span class="fur-18"></span>
20
<span class="fur-17"></span>
21
<span class="fur-16"></span>
22
<span class="fur-15"></span>
23
<span class="fur-14"></span>
CSS
<div _="@=2424,dis=none"><div _="@=2425,dis=none"></div></div>
1
*,
2
*::before,
3
*::after {
4
margin: 0;
5
padding: 0;
6
box-sizing: border-box;
7
}
8
9
body {
10
min-height: 100vh;
11
background: black;
12
}
13
14
#container {
15
display: flex;
16
flex-direction: column;
17
justify-content: center;
18
align-items: center;
19
width: 100%;
20
height: 100%;
21
background-color: #000000;
22
overflow: hidden;
23
}
24
JS (TypeScript)
<div _="@=2845,dis=none"><div _="@=2846,dis=none"></div></div>
Like this project
Posted Dec 26, 2023
Creating a Netflix-style intro animation using pure CSS involves a combination of CSS animations and keyframes. Hire me on Fiverr:- https://www.fiverr...
