├── README.md
├── index.html
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 | # Text-Reveal
2 | Creating a Text Reveal animation using HTML & CSS.
3 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | CODE AASHU | Text Reveal
8 |
9 |
10 |
11 |
12 |
13 | CODE AASHU
14 | CODE AASHU
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* ===( CODE AASHU )=== */
2 | h1 {
3 | font-family: system-ui, sans-serif;
4 | font-size: 10vw;
5 | text-align: center;
6 | }
7 |
8 | .text-reveal {
9 | --animation-duration: 2s;
10 | --animation-delay: 1s;
11 |
12 | --1-fill-color: transparent;
13 | --1-stroke-color: rgb(3, 100, 105);
14 | --1-stroke-size: 1px;
15 |
16 | --2-fill-color: rgb(3, 100, 105);
17 | --2-stroke-color: rgb(45, 173, 180);
18 | --2-stroke-size: 1px;
19 |
20 | --lines-color: rgb(45, 173, 180);;
21 | --lines-size: 2px;
22 |
23 | --text-padding: 0.5rem 1rem;
24 |
25 | display: grid;
26 |
27 | &::after, & > span {
28 | grid-area: 1/1;
29 | animation: var(--animation-name) var(--animation-duration) ease-in-out var(--animation-delay) forwards }
30 |
31 | > span {
32 | padding: var(--text-padding);
33 | color: var(--color);
34 | opacity: 0;
35 | -webkit-mask-repeat: no-repeat;
36 | -webkit-mask-position: center;
37 | -webkit-mask-image: var(--mask-image);
38 | -webkit-mask-composite: var(--mask-composite-webkit);
39 | -webkit-mask-size: var(--mask-size);
40 |
41 | mask-repeat: no-repeat;
42 | mask-position: center;
43 | mask-image: var(--mask-image);
44 | mask-composite: var(--mask-composite);
45 |
46 | &:nth-child(1) {
47 | -webkit-text-stroke: var(--1-stroke-size) var(--1-stroke-color);
48 | --color: var(--1-fill-color);
49 | --mask-image: linear-gradient(black 0 0), linear-gradient(black 0 0);
50 | --mask-composite-webkit: destination-out;
51 | --mask-composite: exclude;
52 | --animation-name: text-reveal-1;
53 |
54 | }
55 | &:nth-child(2){
56 | -webkit-text-stroke: var(--2-stroke-size) var(--2-stroke-color);
57 | --color: var(--2-fill-color);
58 | --mask-image: linear-gradient(black 0 0);
59 | --animation-name: text-reveal-2;
60 | }
61 |
62 | }
63 | &::after{
64 | content: "";
65 | z-index: 2;
66 | border: var(--lines-size) solid var(--lines-color);
67 | border-block: none;
68 | width: 100%;
69 | justify-self: center;
70 | opacity: 0;
71 | --animation-name: text-reveal-lines;
72 | }
73 | }
74 | @keyframes text-reveal-1 {
75 | 0%, 100% { -webkit-mask-size: 100% 100%, 100%; mask-size: 100% 100%, 100%; opacity: 1 }
76 | 50% { -webkit-mask-size: 0% 100%, 100%; mask-size: 100% 100%, 100% }
77 | }
78 | @keyframes text-reveal-2 {
79 | 0%, 50% { -webkit-mask-size: 0% 100%; mask-size: 0% 100%; opacity: 1 }
80 | 100% { -webkit-mask-size: 100% 100%; mask-size: 100% 100%; opacity: 1 }
81 | }
82 | @keyframes text-reveal-lines {
83 | 5%, 95% { opacity: 1 }
84 | 50% { width: 0 }
85 | }
86 |
87 |
88 | *, *:before, *::after { margin: 0; padding: 0; box-sizing: border-box }
89 | .hero {
90 | min-height: 100vh;
91 | background-color: black;
92 | display: grid;
93 | place-items: center;
94 | }
--------------------------------------------------------------------------------