Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- $primaryColor: #fff;
- $secondaryColor: #333;
- $steps: 20;
- body {
- background-color: $secondaryColor;
- padding: 100px;
- }
- .glitch {
- position: relative;
- margin: 0 auto;
- color: $primaryColor;
- font-size: 80px;
- font-family: "Exo", sans-serif;
- font-weight: 600;
- text-align: center;
- text-transform: uppercase;
- letter-spacing: 0.01em;
- transform: scale3d(1,1,1);
- &::before,
- &::after {
- content: attr(data-text);
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- overflow: hidden;
- background: $secondaryColor;
- color: $primaryColor;
- clip: rect(0, 900px, 0, 0);
- }
- &::before {
- left: 7px;
- text-shadow: 1px 0 green;
- animation: glitch-effect 3s infinite linear alternate-reverse;
- }
- &::after {
- left: 3px;
- text-shadow: -1px 0 red;
- animation: glitch-effect 2s infinite linear alternate-reverse;
- }
- }
- @keyframes glitch-effect{
- @for $i from 0 through $steps{
- #{percentage($i*(1/$steps))}{
- clip:rect(random(100)+px,9999px,random(100)+px,0);
- }
- }
- }
Add Comment
Please, Sign In to add comment