Line 3: | Line 3: | ||
<html> | <html> | ||
<style> | <style> | ||
+ | .glitch-wrapper { | ||
+ | height: 100%; | ||
+ | display: flex; | ||
+ | justify-content: center; | ||
+ | align-items: center; | ||
+ | } | ||
.glitch { | .glitch { | ||
− | |||
color: white; | color: white; | ||
− | + | font-size: 150px; | |
− | + | text-transform: upercase; | |
+ | position: relative; | ||
+ | display: inline-block; | ||
} | } | ||
− | .glitch::before { | + | .glitch::before, |
+ | .glitch::after { | ||
content: attr(data-text); | content: attr(data-text); | ||
position: absolute; | position: absolute; | ||
Line 16: | Line 24: | ||
width: 100%; | width: 100%; | ||
height: 100%; | height: 100%; | ||
+ | background: black; | ||
+ | } | ||
+ | .glitch::before { | ||
left: 2px; | left: 2px; | ||
− | text-shadow: -2px 0 # | + | text-shadow: -2px 0 #49fc00; |
− | clip: rect( | + | clip: rect(24px, 550px, 90px, 0); |
− | animation: glitch-anim | + | animation: glitch-anim-2 3s infinite linear alternate-reverse; |
} | } | ||
.glitch::after { | .glitch::after { | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
left: -2px; | left: -2px; | ||
− | text-shadow: -2px 0 # | + | text-shadow: -2px 0 #b300fc; |
− | animation: glitch- | + | clip: rect(85px, 550px, 140px, 0); |
+ | animation: glitch-anim 2.5s infinite linear alternate-reverse; | ||
} | } | ||
− | + | @-webkit-keyframes glitch-anim { | |
− | @keyframes glitch-anim { | + | |
0% { | 0% { | ||
− | clip: rect( | + | clip: rect(29px, 9999px, 26px, 0); |
− | + | ||
} | } | ||
− | + | 4.166666666666666% { | |
− | clip: rect( | + | clip: rect(75px, 9999px, 116px, 0); |
− | + | ||
} | } | ||
− | + | 8.333333333333332% { | |
− | clip: rect( | + | clip: rect(99px, 9999px, 97px, 0); |
− | + | ||
} | } | ||
− | + | 12.5% { | |
− | clip: rect( | + | clip: rect(76px, 9999px, 129px, 0); |
− | + | ||
} | } | ||
− | + | 16.666666666666664% { | |
− | clip: rect( | + | clip: rect(47px, 9999px, 69px, 0); |
− | + | } | |
+ | 20.833333333333336% { | ||
+ | clip: rect(90px, 9999px, 148px, 0); | ||
} | } | ||
25% { | 25% { | ||
− | clip: rect( | + | clip: rect(10px, 9999px, 101px, 0); |
− | + | ||
} | } | ||
− | + | 29.166666666666668% { | |
− | clip: rect( | + | clip: rect(4px, 9999px, 73px, 0); |
− | + | ||
} | } | ||
− | + | 33.33333333333333% { | |
− | clip: rect( | + | clip: rect(114px, 9999px, 66px, 0); |
− | + | ||
} | } | ||
− | + | 37.5% { | |
− | clip: rect( | + | clip: rect(52px, 9999px, 31px, 0); |
− | + | } | |
+ | 41.66666666666667% { | ||
+ | clip: rect(81px, 9999px, 58px, 0); | ||
} | } | ||
− | 45% { | + | 45.83333333333333% { |
− | clip: rect( | + | clip: rect(118px, 9999px, 59px, 0); |
− | + | ||
} | } | ||
50% { | 50% { | ||
− | clip: rect( | + | clip: rect(4px, 9999px, 84px, 0); |
− | + | ||
} | } | ||
− | + | 54.166666666666664% { | |
− | clip: rect( | + | clip: rect(68px, 9999px, 25px, 0); |
− | + | ||
} | } | ||
− | + | 58.333333333333336% { | |
− | clip: rect( | + | clip: rect(132px, 9999px, 63px, 0); |
− | + | ||
} | } | ||
− | + | 62.5% { | |
− | clip: rect( | + | clip: rect(148px, 9999px, 64px, 0); |
− | + | ||
} | } | ||
− | + | 66.66666666666666% { | |
− | clip: rect( | + | clip: rect(136px, 9999px, 55px, 0); |
− | + | } | |
+ | 70.83333333333334% { | ||
+ | clip: rect(138px, 9999px, 31px, 0); | ||
} | } | ||
75% { | 75% { | ||
− | clip: rect( | + | clip: rect(19px, 9999px, 74px, 0); |
− | + | ||
} | } | ||
− | + | 79.16666666666666% { | |
− | clip: rect( | + | clip: rect(75px, 9999px, 114px, 0); |
− | + | ||
} | } | ||
− | + | 83.33333333333334% { | |
− | clip: rect( | + | clip: rect(22px, 9999px, 59px, 0); |
− | + | ||
} | } | ||
− | + | 87.5% { | |
− | clip: rect( | + | clip: rect(32px, 9999px, 64px, 0); |
− | + | } | |
+ | 91.66666666666666% { | ||
+ | clip: rect(65px, 9999px, 104px, 0); | ||
} | } | ||
− | 95% { | + | 95.83333333333334% { |
− | clip: rect( | + | clip: rect(91px, 9999px, 28px, 0); |
− | + | ||
} | } | ||
100% { | 100% { | ||
− | clip: rect( | + | clip: rect(6px, 9999px, 73px, 0); |
− | + | ||
} | } | ||
} | } | ||
− | @keyframes glitch- | + | @keyframes glitch-anim { |
0% { | 0% { | ||
− | clip: rect( | + | clip: rect(29px, 9999px, 26px, 0); |
− | + | ||
} | } | ||
− | 5% { | + | 4.166666666666666% { |
− | clip: rect( | + | clip: rect(75px, 9999px, 116px, 0); |
− | + | } | |
+ | 8.333333333333332% { | ||
+ | clip: rect(99px, 9999px, 97px, 0); | ||
+ | } | ||
+ | 12.5% { | ||
+ | clip: rect(76px, 9999px, 129px, 0); | ||
+ | } | ||
+ | 16.666666666666664% { | ||
+ | clip: rect(47px, 9999px, 69px, 0); | ||
+ | } | ||
+ | 20.833333333333336% { | ||
+ | clip: rect(90px, 9999px, 148px, 0); | ||
+ | } | ||
+ | 25% { | ||
+ | clip: rect(10px, 9999px, 101px, 0); | ||
+ | } | ||
+ | 29.166666666666668% { | ||
+ | clip: rect(4px, 9999px, 73px, 0); | ||
+ | } | ||
+ | 33.33333333333333% { | ||
+ | clip: rect(114px, 9999px, 66px, 0); | ||
+ | } | ||
+ | 37.5% { | ||
+ | clip: rect(52px, 9999px, 31px, 0); | ||
+ | } | ||
+ | 41.66666666666667% { | ||
+ | clip: rect(81px, 9999px, 58px, 0); | ||
+ | } | ||
+ | 45.83333333333333% { | ||
+ | clip: rect(118px, 9999px, 59px, 0); | ||
+ | } | ||
+ | 50% { | ||
+ | clip: rect(4px, 9999px, 84px, 0); | ||
+ | } | ||
+ | 54.166666666666664% { | ||
+ | clip: rect(68px, 9999px, 25px, 0); | ||
+ | } | ||
+ | 58.333333333333336% { | ||
+ | clip: rect(132px, 9999px, 63px, 0); | ||
+ | } | ||
+ | 62.5% { | ||
+ | clip: rect(148px, 9999px, 64px, 0); | ||
+ | } | ||
+ | 66.66666666666666% { | ||
+ | clip: rect(136px, 9999px, 55px, 0); | ||
+ | } | ||
+ | 70.83333333333334% { | ||
+ | clip: rect(138px, 9999px, 31px, 0); | ||
+ | } | ||
+ | 75% { | ||
+ | clip: rect(19px, 9999px, 74px, 0); | ||
+ | } | ||
+ | 79.16666666666666% { | ||
+ | clip: rect(75px, 9999px, 114px, 0); | ||
+ | } | ||
+ | 83.33333333333334% { | ||
+ | clip: rect(22px, 9999px, 59px, 0); | ||
+ | } | ||
+ | 87.5% { | ||
+ | clip: rect(32px, 9999px, 64px, 0); | ||
+ | } | ||
+ | 91.66666666666666% { | ||
+ | clip: rect(65px, 9999px, 104px, 0); | ||
+ | } | ||
+ | 95.83333333333334% { | ||
+ | clip: rect(91px, 9999px, 28px, 0); | ||
+ | } | ||
+ | 100% { | ||
+ | clip: rect(6px, 9999px, 73px, 0); | ||
+ | } | ||
+ | } | ||
+ | @-webkit-keyframes glitch-anim-2 { | ||
+ | 6.666666666666667% { | ||
+ | clip: rect(19px, 9999px, 56px, 0); | ||
} | } | ||
10% { | 10% { | ||
− | clip: rect( | + | clip: rect(16px, 9999px, 54px, 0); |
− | + | ||
} | } | ||
− | + | 13.333333333333334% { | |
− | clip: rect( | + | clip: rect(118px, 9999px, 14px, 0); |
− | + | } | |
+ | 16.666666666666664% { | ||
+ | clip: rect(103px, 9999px, 91px, 0); | ||
} | } | ||
20% { | 20% { | ||
− | clip: rect( | + | clip: rect(106px, 9999px, 76px, 0); |
− | + | ||
} | } | ||
− | + | 23.333333333333332% { | |
− | clip: rect( | + | clip: rect(97px, 9999px, 144px, 0); |
− | + | } | |
+ | 26.666666666666668% { | ||
+ | clip: rect(4px, 9999px, 134px, 0); | ||
} | } | ||
30% { | 30% { | ||
− | clip: rect( | + | clip: rect(65px, 9999px, 111px, 0); |
− | + | ||
} | } | ||
− | + | 33.33333333333333% { | |
− | clip: rect( | + | clip: rect(51px, 9999px, 106px, 0); |
− | + | } | |
+ | 36.666666666666664% { | ||
+ | clip: rect(131px, 9999px, 24px, 0); | ||
} | } | ||
40% { | 40% { | ||
− | clip: rect( | + | clip: rect(54px, 9999px, 32px, 0); |
− | + | ||
} | } | ||
− | + | 43.333333333333336% { | |
− | clip: rect( | + | clip: rect(70px, 9999px, 113px, 0); |
− | + | } | |
+ | 46.666666666666664% { | ||
+ | clip: rect(94px, 9999px, 111px, 0); | ||
} | } | ||
50% { | 50% { | ||
− | clip: rect( | + | clip: rect(5px, 9999px, 58px, 0); |
− | + | ||
} | } | ||
− | + | 53.333333333333336% { | |
− | clip: rect( | + | clip: rect(123px, 9999px, 4px, 0); |
− | + | } | |
+ | 56.666666666666664% { | ||
+ | clip: rect(32px, 9999px, 149px, 0); | ||
} | } | ||
60% { | 60% { | ||
− | clip: rect( | + | clip: rect(9px, 9999px, 46px, 0); |
− | + | ||
} | } | ||
− | + | 63.33333333333333% { | |
− | clip: rect( | + | clip: rect(66px, 9999px, 13px, 0); |
− | + | } | |
+ | 66.66666666666666% { | ||
+ | clip: rect(35px, 9999px, 40px, 0); | ||
} | } | ||
70% { | 70% { | ||
− | clip: rect( | + | clip: rect(65px, 9999px, 31px, 0); |
− | + | ||
} | } | ||
− | + | 73.33333333333333% { | |
− | clip: rect( | + | clip: rect(17px, 9999px, 110px, 0); |
− | + | } | |
+ | 76.66666666666667% { | ||
+ | clip: rect(55px, 9999px, 106px, 0); | ||
} | } | ||
80% { | 80% { | ||
− | clip: rect( | + | clip: rect(132px, 9999px, 42px, 0); |
− | + | ||
} | } | ||
− | + | 83.33333333333334% { | |
− | clip: rect( | + | clip: rect(34px, 9999px, 29px, 0); |
− | + | } | |
+ | 86.66666666666667% { | ||
+ | clip: rect(111px, 9999px, 86px, 0); | ||
} | } | ||
90% { | 90% { | ||
− | clip: rect( | + | clip: rect(72px, 9999px, 138px, 0); |
− | + | ||
} | } | ||
− | + | 93.33333333333333% { | |
− | clip: rect( | + | clip: rect(121px, 9999px, 117px, 0); |
− | + | } | |
+ | 96.66666666666667% { | ||
+ | clip: rect(129px, 9999px, 63px, 0); | ||
} | } | ||
100% { | 100% { | ||
− | clip: rect( | + | clip: rect(126px, 9999px, 119px, 0); |
− | + | ||
} | } | ||
} | } | ||
− | @keyframes glitch- | + | @keyframes glitch-anim-2 { |
− | + | 6.666666666666667% { | |
− | + | clip: rect(19px, 9999px, 56px, 0); | |
} | } | ||
10% { | 10% { | ||
− | + | clip: rect(16px, 9999px, 54px, 0); | |
+ | } | ||
+ | 13.333333333333334% { | ||
+ | clip: rect(118px, 9999px, 14px, 0); | ||
+ | } | ||
+ | 16.666666666666664% { | ||
+ | clip: rect(103px, 9999px, 91px, 0); | ||
} | } | ||
20% { | 20% { | ||
− | + | clip: rect(106px, 9999px, 76px, 0); | |
+ | } | ||
+ | 23.333333333333332% { | ||
+ | clip: rect(97px, 9999px, 144px, 0); | ||
+ | } | ||
+ | 26.666666666666668% { | ||
+ | clip: rect(4px, 9999px, 134px, 0); | ||
} | } | ||
30% { | 30% { | ||
− | + | clip: rect(65px, 9999px, 111px, 0); | |
+ | } | ||
+ | 33.33333333333333% { | ||
+ | clip: rect(51px, 9999px, 106px, 0); | ||
+ | } | ||
+ | 36.666666666666664% { | ||
+ | clip: rect(131px, 9999px, 24px, 0); | ||
} | } | ||
40% { | 40% { | ||
− | + | clip: rect(54px, 9999px, 32px, 0); | |
+ | } | ||
+ | 43.333333333333336% { | ||
+ | clip: rect(70px, 9999px, 113px, 0); | ||
+ | } | ||
+ | 46.666666666666664% { | ||
+ | clip: rect(94px, 9999px, 111px, 0); | ||
} | } | ||
50% { | 50% { | ||
− | + | clip: rect(5px, 9999px, 58px, 0); | |
+ | } | ||
+ | 53.333333333333336% { | ||
+ | clip: rect(123px, 9999px, 4px, 0); | ||
+ | } | ||
+ | 56.666666666666664% { | ||
+ | clip: rect(32px, 9999px, 149px, 0); | ||
} | } | ||
60% { | 60% { | ||
− | + | clip: rect(9px, 9999px, 46px, 0); | |
+ | } | ||
+ | 63.33333333333333% { | ||
+ | clip: rect(66px, 9999px, 13px, 0); | ||
+ | } | ||
+ | 66.66666666666666% { | ||
+ | clip: rect(35px, 9999px, 40px, 0); | ||
} | } | ||
70% { | 70% { | ||
− | + | clip: rect(65px, 9999px, 31px, 0); | |
+ | } | ||
+ | 73.33333333333333% { | ||
+ | clip: rect(17px, 9999px, 110px, 0); | ||
+ | } | ||
+ | 76.66666666666667% { | ||
+ | clip: rect(55px, 9999px, 106px, 0); | ||
} | } | ||
80% { | 80% { | ||
− | + | clip: rect(132px, 9999px, 42px, 0); | |
+ | } | ||
+ | 83.33333333333334% { | ||
+ | clip: rect(34px, 9999px, 29px, 0); | ||
+ | } | ||
+ | 86.66666666666667% { | ||
+ | clip: rect(111px, 9999px, 86px, 0); | ||
} | } | ||
90% { | 90% { | ||
− | + | clip: rect(72px, 9999px, 138px, 0); | |
+ | } | ||
+ | 93.33333333333333% { | ||
+ | clip: rect(121px, 9999px, 117px, 0); | ||
+ | } | ||
+ | 96.66666666666667% { | ||
+ | clip: rect(129px, 9999px, 63px, 0); | ||
} | } | ||
100% { | 100% { | ||
− | + | clip: rect(126px, 9999px, 119px, 0); | |
} | } | ||
} | } | ||
Line 503: | Line 633: | ||
<div class="column" style="color: white; display: flex; align-items: center;"> | <div class="column" style="color: white; display: flex; align-items: center;"> | ||
<div> | <div> | ||
+ | .glitch-wrapper | ||
+ | .glitch(data-text="GLITCH") GLITCH | ||
<p class="glitch" data-text="Fastest." style="font-size: 4em; line-height: 1em;">Fastest.</p> | <p class="glitch" data-text="Fastest." style="font-size: 4em; line-height: 1em;">Fastest.</p> | ||
<p class="glitch" data-text="Phototrophic." style="font-size: 4em; line-height: 1em;">Phototrophic.</p> | <p class="glitch" data-text="Phototrophic." style="font-size: 4em; line-height: 1em;">Phototrophic.</p> |
Revision as of 16:38, 4 September 2019
.glitch-wrapper
.glitch(data-text="GLITCH") GLITCH
Fastest.
Phototrophic.
Organism.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.