├── README.md
├── smoke.css
├── smoke.html
└── smoke.mp4
/README.md:
--------------------------------------------------------------------------------
1 | # Smoke-Effect-on-Your-Name-CSS-Animation
--------------------------------------------------------------------------------
/smoke.css:
--------------------------------------------------------------------------------
1 | *{
2 | margin: 0;
3 | padding: 0;
4 | box-sizing: border-box;
5 | }
6 |
7 | video{
8 | object-fit: cover;
9 | }
10 |
11 | section{
12 | background:#000 ;
13 | }
14 |
15 | h1{
16 | position: absolute;
17 | top: 50%;
18 | transform: translateY(-50%);
19 | width: 100%;
20 | text-align: center;
21 | letter-spacing: 1rem;
22 | text-transform: uppercase;
23 | color: #f5f5f5;
24 | font-size: 5em;
25 | font-family: sans-serif;
26 | }
27 |
28 | h1 span{
29 | display: inline-block;
30 | animation: animate 1s ease-in-out;
31 |
32 | }
33 |
34 | @keyframes animate{
35 | 0%{
36 | opacity: 0%;
37 | transform: rotateY(90deg);
38 | filter: blur(10px);
39 | }
40 | 100%{
41 | opacity: 1;
42 | transform: rotateY(0deg);
43 | filter: blur(0px);
44 | }
45 | }
46 | h1 span:nth-child(1)
47 | {
48 | animation-delay: 0.6s;
49 | }
50 | h1 span:nth-child(2)
51 | {
52 | animation-delay: 1s;
53 | }
54 | h1 span:nth-child(3)
55 | {
56 | animation-delay: 1.7s;
57 | }
58 | h1 span:nth-child(4)
59 | {
60 | animation-delay: 2.3s;
61 | }
62 | h1 span:nth-child(5)
63 | {
64 | animation-delay: 2.7s;
65 | }
66 | h1 span:nth-child(6)
67 | {
68 | animation-delay: 3.2s;
69 | }
70 | h1 span:nth-child(7)
71 | {
72 | animation-delay: 3.7s;
73 | }
74 | h1 span:nth-child(8)
75 | {
76 | animation-delay: 4s;
77 | }
78 |
--------------------------------------------------------------------------------
/smoke.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | smoke effect on Name
9 |
10 |
11 |
12 |
13 |
14 | A
15 | B
16 | H
17 | I
18 | S
19 | H
20 | E
21 | K
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/smoke.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thundercoding07/Smoke-Effect-on-Your-Name-CSS-Animation/4517f92fde30c06bd75315c33795860e0e5a76a5/smoke.mp4
--------------------------------------------------------------------------------