Pure CSS “Matrix code” effect

Step 1

Create CSS property (better for animation)

@property –timer {
syntax: ‘<integer>’;
inherits: false;
initial-value: 1;
}

Or just

:root { –timer: 1; }

Step 2

Animate property

@…


This content originally appeared on DEV Community and was authored by Tetragius

Step 1

Create CSS property (better for animation)

@property --timer {
     syntax: '<integer>';
     inherits: false;
     initial-value: 1;
}

Or just

:root { --timer: 1; }

Step 2

Animate property

 @keyframes animate-letter {
     to {
         --timer: 26; /*26 -  the number of letters of the English alphabet*/
     }
 }

Step 3

Add some counter magic

.letter {
     counter-reset: timer var(--timer);
     animation: animate-letter 2s linear infinite running;
}

.letter div:before{
     content: counter(timer, lower-alpha);
}

lower-alpha - predefined counter styles

Now, at each step of the animation, the variable --timer will increase by 1 until it reaches 26. For each digit, the corresponding letter of the alphabet will be selected.

Step 4

Add more counters

.letter {
      counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
     animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/

.letter div:before{
      content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
        writing-mode: vertical-rl; 
        text-orientation: upright;
}
/*Also directing text from top to bottom*/

Step 5

Add other effects and animations on the bite. And it's ready!


This content originally appeared on DEV Community and was authored by Tetragius


Print Share Comment Cite Upload Translate Updates
APA

Tetragius | Sciencx (2021-12-09T18:54:35+00:00) Pure CSS “Matrix code” effect. Retrieved from https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/

MLA
" » Pure CSS “Matrix code” effect." Tetragius | Sciencx - Thursday December 9, 2021, https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/
HARVARD
Tetragius | Sciencx Thursday December 9, 2021 » Pure CSS “Matrix code” effect., viewed ,<https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/>
VANCOUVER
Tetragius | Sciencx - » Pure CSS “Matrix code” effect. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/
CHICAGO
" » Pure CSS “Matrix code” effect." Tetragius | Sciencx - Accessed . https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/
IEEE
" » Pure CSS “Matrix code” effect." Tetragius | Sciencx [Online]. Available: https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/. [Accessed: ]
rf:citation
» Pure CSS “Matrix code” effect | Tetragius | Sciencx | https://www.scien.cx/2021/12/09/pure-css-matrix-code-effect/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts