User:Wavpro/Sandbox/style.css
< User:Wavpro | Sandbox
Jump to navigation
Jump to search
|
Note: This is a user's personal page attached to their profile! This is not an actual article, may not be related to JoJo or Araki, and is not associated with the wiki. As such, it may not adhere to the policies. |
.wou {
position: absolute;
float: left;
clear: both;
-webkit-filter: drop-shadow(1px 1px 0 red)
drop-shadow(-1px -1px 0 red);
filter: drop-shadow(1px 1px 0 red)
drop-shadow(-1px -1px 0 red);
}
.wou\-animation {
animation: glitch 1s linear infinite;
}
@keyframes glitch {
2%, 64% {
transform: translate(2px, 0) skew(0deg);
}
4%, 60% {
transform: translate(-2px, 0) skew(0deg);
}
62% {
transform: translate(0, 0) skew(5deg);
}
}
.woubefore {
display: none;
animation: glitchTop 1s linear infinite;
clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
-webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}
@keyframes glitchTop{
2%, 64% {
opacity: 0;
visibility: hidden;
transform: translate(2px, -2px);
}
4%, 60% {
opacity: 100;
visibility: visible;
transform: translate(-2px, 2px);
}
62% {
opacity: 0;
visibility: hidden;
transform: translate(13px, -1px) skew(-13deg);
}
}
.wouafter {
animation: glitchBottom 1.5s linear infinite;
clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
-webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}
@keyframes glitchBottom {
2%, 64% {
transform: translate(-2px, 0);
}
4%, 60% {
transform: translate(-2px, 0);
}
62% {
transform: translate(-22px, 5px) skew(21deg);
}
}
.wou\-wrapper {
display: block;
float: left;
height: 317px;
width: 150px;
}
