Post by Penelope Gray on Sept 5, 2024 17:51:51 GMT -7
[nospaces][googlefont="Barlow|Unica+One"]
[attr="class","harmonious"]
[attr="class","glitch"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","album"]
[attr="class","rightpannel"]
Love & Fairies
Bubble Gum
[attr="class","artist"]by NewJeans
Bubble Tea
[attr="class","artist"]by Dark Cat
Sage
[attr="class","artist"]by Tophat Panda
Gimme Chocolate
[attr="class","artist"]by BABYMETAL
Clarity
[attr="class","artist"]by Zedd
Suzume
[attr="class","artist"]by RADWIMPS
Flowers At Midnight
[attr="class","artist"]by Flehmann
crushcrushcrush
[attr="class","artist"]by Paramore
Alcohol-Free
[attr="class","artist"]by TWICE
Sugarcoat
[attr="class","artist"]by KISS OF LIFE
❄
[newclass=.harmonious .album] background: url('https://w0.peakpx.com/wallpaper/715/702/HD-wallpaper-anime-takt-op-destiny-destiny-takt-op-destiny.jpg') no-repeat 50% 0; [/newclass]
[newclass=.harmonious] --harmonioushighlight: #f54a93 [/newclass]
[newclass=.harmonious] position: relative; box-sizing: border-box; width: 100%; margin:auto; padding: 15px; color: #e2dad6; text-align:right; border-radius: 10px; -moz-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); -webkit-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); font: 14px / 14px Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; overflow:hidden; background-color: #2d2d2d;[/newclass]
[newclass=.harmonious .rightpannel] position: absolute; top: 0px; right: 15px; left: 235px; bottom: 0px; overflow: auto; [/newclass]
[newclass=.harmonious h1] margin: 0px; margin-top: 15px; margin-right: 15px; font: 20px / 20px Unica One, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; text-align: right; [/newclass]
[newclass=.harmonious ol] margin:0px; padding: 0px; margin-right: 7px; margin-left: 5px; counter-reset: songs; list-style-type: none; padding-bottom: 10px; [/newclass]
[newclass=.harmonious li] position: relative; padding: 11px 0px; counter-increment: songs; transition: all 0.5s; border-bottom: 1px solid rgba(226, 218, 214, 0.3); [/newclass]
[newclass=.harmonious li marquee] color: transparent; [/newclass]
[newclass=.harmonious li .artist, .harmonious li marquee] position: absolute; bottom: 0px; right: 0px; opacity: 0.7; font-size: 10px; text-transform: uppercase; transition: all 1s; [/newclass]
[newclass=.harmonious li:hover marquee] color: inherit; [/newclass]
[newclass=.harmonious li:hover .artist] color: transparent; [/newclass]
[newclass=.harmonious li::before] content: counter(songs); float:left; font-size: 10px; margin-right: 20px; [/newclass]
[newclass=.harmonious li a, .harmonious li b] position: relative; display: inline-block; max-width: 85%; font-family: Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; [/newclass]
[newclass=.harmonious a, .harmonious b] color: var(--harmonioushighlight); text-decoration: none; [/newclass]
[newclass=.harmonious li a:hover, .harmonious li b:hover] display:inline-block; animation-name: glitch-anim-text; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0.2s; [/newclass]
[newclass=.harmonious h1::after] content: ''; display: block; height: 2px; width: 60%; background-color: var(--harmonioushighlight); position: absolute; right: 0; [/newclass]
[newclass=.harmonious .glitch] position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 5px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay] opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(45, 45, 45, 0.7); text-align:center; padding-top: 180px; font-size: 10px; text-transform: uppercase; z-index: 5; transition: 1s all; color: #e2dad6;[/newclass]
[newclass=.harmonious .glitch .albumoverlay::before] content: ''; opacity: 0.8; display: block; border: 15px solid var(--harmonioushighlight); box-sizing: border-box; width: 150px; height: 150px; position: absolute; top: 50%; margin-top: -75px; left: 50%; margin-left: -75px; border-radius: 75px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay::after] content: ''; opacity: 0.8; display: block; box-sizing: border-box; width: 0; height: 0; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 60px solid var(--harmonioushighlight); position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -25px; [/newclass]
[newclass=.harmonious .glitch:hover .albumoverlay] opacity: 1; [/newclass]
[newclass=.harmonious .album] position: absolute; width: calc(100% + 4px); height: calc(100% + 40px); background-color: transparent; background-size: cover; transform: translate3d(0,0,0); background-blend-mode: none; -moz-box-shadow: inset 0 0 25px #1e1e1e; -webkit-box-shadow: inset 0 0 25px #1e1e1e; box-shadow: inset 0 0 25px #1e1e1e; z-index: 4; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(2)] transform: translate3d(0, 2px, 0); animation: glitch-anim-1 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(3)] transform: translate3d(0, -2px, 0); animation: glitch-anim-2 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(4)] transform: translate3d(-20px, 0, 0) scale3d(-1,-1,1); animation: glitch-anim-3 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(5)] animation: glitch-anim-flash 1.5s steps(1,end) infinite; [/newclass]
[newclass=.harmonious .album:nth-child(3)] background-color: #af4563; background-blend-mode: multiply; [/newclass]
[newclass=.harmonious ::-webkit-scrollbar] width: 0px; [/newclass]
[newclass=.keyframehellscape] }@keyframes glitch-anim-1 { 0% { -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); } 10% { -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); } 20% { -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); } 40% { -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); } 50% { -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); } 60% { -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); } 80% { -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); } 90% { -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); } } @keyframes glitch-anim-2 { 0% { -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); } 15% { -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); } 22% { -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); } 31% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); } 51% { -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); } 63% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 76% { -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); } 81% { -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); } 94% { -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); } 100% { -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); } } @keyframes glitch-anim-3 { 0% { -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); } 5% { -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); } 10% { -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); } 25% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 27% { -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); } 33% { -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);; clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%); } 37% { -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);; clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%); } 40% { -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); } 50% { -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); } 53% { -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); } 57% { -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); } 60% { -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); } 65% { -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); } 73% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 80% { -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); } } @keyframes glitch-anim-flash { 0% { opacity: 0.2; transform: translate3d(20px, 2px, 0); } 15%, 100% { opacity: 0; transform: translate3d(0,0,0); } } @keyframes glitch-anim-text { 0% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); } 10%, 100% { transform: translate3d(0,0,0) scale3d(1,1,1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } [/newclass]
[newclass=.harmonious] --harmonioushighlight: #f54a93 [/newclass]
[newclass=.harmonious] position: relative; box-sizing: border-box; width: 100%; margin:auto; padding: 15px; color: #e2dad6; text-align:right; border-radius: 10px; -moz-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); -webkit-box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); box-shadow: 5px 5px 13px rgba(30, 30, 30, 0.5); font: 14px / 14px Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; overflow:hidden; background-color: #2d2d2d;[/newclass]
[newclass=.harmonious .rightpannel] position: absolute; top: 0px; right: 15px; left: 235px; bottom: 0px; overflow: auto; [/newclass]
[newclass=.harmonious h1] margin: 0px; margin-top: 15px; margin-right: 15px; font: 20px / 20px Unica One, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; text-align: right; [/newclass]
[newclass=.harmonious ol] margin:0px; padding: 0px; margin-right: 7px; margin-left: 5px; counter-reset: songs; list-style-type: none; padding-bottom: 10px; [/newclass]
[newclass=.harmonious li] position: relative; padding: 11px 0px; counter-increment: songs; transition: all 0.5s; border-bottom: 1px solid rgba(226, 218, 214, 0.3); [/newclass]
[newclass=.harmonious li marquee] color: transparent; [/newclass]
[newclass=.harmonious li .artist, .harmonious li marquee] position: absolute; bottom: 0px; right: 0px; opacity: 0.7; font-size: 10px; text-transform: uppercase; transition: all 1s; [/newclass]
[newclass=.harmonious li:hover marquee] color: inherit; [/newclass]
[newclass=.harmonious li:hover .artist] color: transparent; [/newclass]
[newclass=.harmonious li::before] content: counter(songs); float:left; font-size: 10px; margin-right: 20px; [/newclass]
[newclass=.harmonious li a, .harmonious li b] position: relative; display: inline-block; max-width: 85%; font-family: Barlow, Calibri, Gill Sans, Myriad Pro, Myriad, Tahoma, Geneva, Helvetica, Arial, sans-serif; font-size: 14px; [/newclass]
[newclass=.harmonious a, .harmonious b] color: var(--harmonioushighlight); text-decoration: none; [/newclass]
[newclass=.harmonious li a:hover, .harmonious li b:hover] display:inline-block; animation-name: glitch-anim-text; animation-duration: 4s; animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: 0.2s; [/newclass]
[newclass=.harmonious h1::after] content: ''; display: block; height: 2px; width: 60%; background-color: var(--harmonioushighlight); position: absolute; right: 0; [/newclass]
[newclass=.harmonious .glitch] position: relative; width: 200px; height: 200px; overflow: hidden; border-radius: 5px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay] opacity: 0; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(45, 45, 45, 0.7); text-align:center; padding-top: 180px; font-size: 10px; text-transform: uppercase; z-index: 5; transition: 1s all; color: #e2dad6;[/newclass]
[newclass=.harmonious .glitch .albumoverlay::before] content: ''; opacity: 0.8; display: block; border: 15px solid var(--harmonioushighlight); box-sizing: border-box; width: 150px; height: 150px; position: absolute; top: 50%; margin-top: -75px; left: 50%; margin-left: -75px; border-radius: 75px; [/newclass]
[newclass=.harmonious .glitch .albumoverlay::after] content: ''; opacity: 0.8; display: block; box-sizing: border-box; width: 0; height: 0; border-top: 35px solid transparent; border-bottom: 35px solid transparent; border-left: 60px solid var(--harmonioushighlight); position: absolute; top: 50%; margin-top: -35px; left: 50%; margin-left: -25px; [/newclass]
[newclass=.harmonious .glitch:hover .albumoverlay] opacity: 1; [/newclass]
[newclass=.harmonious .album] position: absolute; width: calc(100% + 4px); height: calc(100% + 40px); background-color: transparent; background-size: cover; transform: translate3d(0,0,0); background-blend-mode: none; -moz-box-shadow: inset 0 0 25px #1e1e1e; -webkit-box-shadow: inset 0 0 25px #1e1e1e; box-shadow: inset 0 0 25px #1e1e1e; z-index: 4; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(2)] transform: translate3d(0, 2px, 0); animation: glitch-anim-1 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(3)] transform: translate3d(0, -2px, 0); animation: glitch-anim-2 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(4)] transform: translate3d(-20px, 0, 0) scale3d(-1,-1,1); animation: glitch-anim-3 2.25s infinite linear alternate; [/newclass]
[newclass=.harmonious .glitch .album:nth-child(5)] animation: glitch-anim-flash 1.5s steps(1,end) infinite; [/newclass]
[newclass=.harmonious .album:nth-child(3)] background-color: #af4563; background-blend-mode: multiply; [/newclass]
[newclass=.harmonious ::-webkit-scrollbar] width: 0px; [/newclass]
[newclass=.keyframehellscape] }@keyframes glitch-anim-1 { 0% { -webkit-clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%); } 10% { -webkit-clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%); } 20% { -webkit-clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%); } 40% { -webkit-clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%); } 50% { -webkit-clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%); } 60% { -webkit-clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); clip-path: polygon(70% 0, 70% 0, 70% 100% 70%, 70% 100%); } 80% { -webkit-clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); clip-path: polygon(80% 0, 80% 0, 80% 100% 80%, 80% 100%); } 90% { -webkit-clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%); } } @keyframes glitch-anim-2 { 0% { -webkit-clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%); } 15% { -webkit-clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%); } 22% { -webkit-clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%); } 31% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%); } 51% { -webkit-clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%); } 63% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 76% { -webkit-clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%); } 81% { -webkit-clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%); } 94% { -webkit-clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%); } 100% { -webkit-clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%); } } @keyframes glitch-anim-3 { 0% { -webkit-clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%); } 5% { -webkit-clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%); } 10% { -webkit-clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); clip-path: polygon(5% 0, 6% 0 6% 100%, 5% 100%); } 25% { -webkit-clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%); } 27% { -webkit-clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%); } 30% { -webkit-clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%); } 33% { -webkit-clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);; clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%); } 37% { -webkit-clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);; clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%); } 40% { -webkit-clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%); } 45% { -webkit-clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%); } 50% { -webkit-clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%); } 53% { -webkit-clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%); } 57% { -webkit-clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%); } 60% { -webkit-clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%); } 65% { -webkit-clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%); } 70% { -webkit-clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%); } 73% { -webkit-clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%); } 80% { -webkit-clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%); } 100% { -webkit-clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%); } } @keyframes glitch-anim-flash { 0% { opacity: 0.2; transform: translate3d(20px, 2px, 0); } 15%, 100% { opacity: 0; transform: translate3d(0,0,0); } } @keyframes glitch-anim-text { 0% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); -webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%); } 2% { -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%); } 4% { -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%); } 5% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%); } 6% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%); } 7% { -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%); } 8% { -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%); } 9% { -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%); } 9.9% { transform: translate3d(-20px,0,0) scale3d(-1,-1,1); } 10%, 100% { transform: translate3d(0,0,0) scale3d(1,1,1); -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); } [/newclass]
The shoutbox is a public space, so please don't advertise, and do your best to be inclusive/friendly.
