|
@ -16,7 +16,8 @@ article { |
|
|
width: 115%; |
|
|
width: 115%; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glitch:before, .glitch:after { |
|
|
|
|
|
|
|
|
.glitch::before, |
|
|
|
|
|
.glitch::after { |
|
|
display: block; |
|
|
display: block; |
|
|
content: '/n(j)uː/ tokyo'; |
|
|
content: '/n(j)uː/ tokyo'; |
|
|
position: absolute; |
|
|
position: absolute; |
|
@ -27,22 +28,22 @@ article { |
|
|
opacity: .8; |
|
|
opacity: .8; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glitch:after { |
|
|
|
|
|
|
|
|
.glitch::after { |
|
|
color: #f0f; |
|
|
color: #f0f; |
|
|
z-index: -2; |
|
|
z-index: -2; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glitch:before { |
|
|
|
|
|
|
|
|
.glitch::before { |
|
|
color: #0ff; |
|
|
color: #0ff; |
|
|
z-index: -1; |
|
|
z-index: -1; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glitch:not(:hover):before { |
|
|
|
|
|
|
|
|
.glitch:not(:hover)::before { |
|
|
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; |
|
|
-webkit-animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; |
|
|
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; |
|
|
animation: glitch 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.glitch:not(:hover):after { |
|
|
|
|
|
|
|
|
.glitch:not(:hover)::after { |
|
|
-webkit-animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; |
|
|
-webkit-animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; |
|
|
animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; |
|
|
animation: glitch 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite; |
|
|
} |
|
|
} |
|
|