Interesting clock for web page

HTML
<div class="glitch-sw"><a href="#" class="sw"></a></div> <div class="wrap glitch"> <div class="clock is-off"><span data-time="" class="time"></span></div> <div class="figure"></div> <div class="figure-mask"></div> </div>
CSS
@import url("http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900"); *, *:before, *:after { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; user-select: none; -webkit-user-select: none; } html, body { height: 100%; } ol, ul { list-style: none; } a { text-decoration: none; } body { font: 400 16px/1.5 'Lato', sans-serif; background: #111; color: #fff; } .glitch-sw { display: block; position: fixed; z-index: 999999999999; right: 20px; bottom: 20px; width: 16px; height: 16px; background: transparent; border: 2px solid #fff; border-radius: 50%; opacity: 0.15; transition: opacity 0.15s; } .glitch-sw:hover { opacity: 1; } .glitch-sw a.sw { display: block; width: 100%; height: 100%; } .glitch-sw:before { display: block; content: ''; position: absolute; border-radius: 4px; width: 2px; height: 5px; background: #fff; top: 0; left: 5px; } .wrap { position: relative; z-index: 1; widht: 100%; height: 100%; overflow: hidden; } .figure { display: block; position: absolute; z-index: 1; width: 0; height: 0; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-top: 200px solid #fff; border-right: 100px solid transparent; border-left: 100px solid transparent; border-bottom: 0 solid transparent; } .figure:before { display: block; content: ''; position: absolute; z-index: 99; width: 0; height: 0; top: -194px; left: -90px; margin: auto; border-top: 180px solid #111; border-right: 90px solid transparent; border-left: 90px solid transparent; border-bottom: 0 solid transparent; } .figure-mask { display: block; position: absolute; z-index: 99; width: 0; height: 0; top: 0; right: 0; bottom: 0; left: 0; margin: auto; border-top: 200px solid transparent; border-right: 100px solid #111; border-left: 100px solid #111; border-bottom: 0 solid transparent; } .clock { display: block; position: absolute; z-index: 9; width: 720px; height: 128px; text-align: center; top: 0; right: 0; bottom: 0; left: 0; margin: auto; cursor: default; } .clock span { display: block; position: relative; font-weight: 700; font-size: 128px; line-height: 1; } .clock.is-off { -webkit-animation: is-off 2s linear infinite !important; animation: is-off 2s linear infinite !important; } .glitch:before { position: absolute; z-index: 999999; content: ''; top: 0; right: 0; bottom: 0; left: 0; -webkit-animation: bg-move 2s ease-out infinite; animation: bg-move 2s ease-out infinite; background-size: 100% 8px; background-image: linear-gradient(0, rgba(255,255,255,0.05) 10%, transparent 10%, transparent 50%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.05) 60%, transparent 60%, transparent); } .glitch .figure, .glitch .figure-mask { transform: skewX(0deg); transform: scaleY(1); -webkit-animation: tr-bag 4s linear infinite; animation: tr-bag 4s linear infinite; } .glitch .clock { transform: skewX(0deg); transform: scaleY(1); -webkit-animation: clock-bag 4s linear infinite; animation: clock-bag 4s linear infinite; } .glitch .clock span:before, .glitch .clock span:after { display: block; content: attr(data-time); position: absolute; top: 0; color: #fff; background: #111; overflow: hidden; width: 720px; height: 128px; clip: rect(0, 900px, 0, 0); } .glitch .clock span:before { left: -2px; text-shadow: 2px 0 #00f; -webkit-animation: c2 1s infinite linear alternate-reverse; animation: c2 1s infinite linear alternate-reverse; } .glitch .clock span:after { left: 3px; text-shadow: -2px 0 #f00; -webkit-animation: c1 2s infinite linear alternate-reverse; animation: c1 2s infinite linear alternate-reverse; } @-moz-keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { transform: scaleY(1) skewX(0deg); } 72% { transform: scaleY(3) skewX(-60deg); } 73% { transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } } @-webkit-keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { transform: scaleY(1) skewX(0deg); } 72% { transform: scaleY(3) skewX(-60deg); } 73% { transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } } @-o-keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { transform: scaleY(1) skewX(0deg); } 72% { transform: scaleY(3) skewX(-60deg); } 73% { transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } } @keyframes is-off { 0% { opacity: 1; } 50% { opacity: 1; } 56% { opacity: 0; } 57% { opacity: 0; } 58% { opacity: 1; } 71% { transform: scaleY(1) skewX(0deg); } 72% { transform: scaleY(3) skewX(-60deg); } 73% { transform: scaleY(1) skewX(0deg); } 80% { opacity: 1; } 81% { opacity: 0; } 84% { opacity: 0; } 85% { opacity: 1; } 91% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } 92% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); color: #008000; } 93% { transform: scaleX(1) scaleY(1) skewX(0deg); color: #fff; } } @-moz-keyframes c1 { 0% { clip: rect(27px, 9999px, 44px, 0); } 5% { clip: rect(65px, 9999px, 9px, 0); } 10% { clip: rect(88px, 9999px, 24px, 0); } 15% { clip: rect(33px, 9999px, 36px, 0); } 20% { clip: rect(34px, 9999px, 16px, 0); } 25% { clip: rect(56px, 9999px, 61px, 0); } 30% { clip: rect(55px, 9999px, 19px, 0); } 35% { clip: rect(30px, 9999px, 62px, 0); } 40% { clip: rect(2px, 9999px, 90px, 0); } 45% { clip: rect(27px, 9999px, 54px, 0); } 50% { clip: rect(65px, 9999px, 84px, 0); } 55% { clip: rect(21px, 9999px, 89px, 0); } 60% { clip: rect(36px, 9999px, 81px, 0); } 65% { clip: rect(88px, 9999px, 4px, 0); } 70% { clip: rect(94px, 9999px, 53px, 0); } 75% { clip: rect(90px, 9999px, 98px, 0); } 80% { clip: rect(79px, 9999px, 36px, 0); } 85% { clip: rect(80px, 9999px, 26px, 0); } 90% { clip: rect(54px, 9999px, 70px, 0); } 95% { clip: rect(73px, 9999px, 50px, 0); } 100% { clip: rect(3px, 9999px, 50px, 0); } } @-webkit-keyframes c1 { 0% { clip: rect(27px, 9999px, 44px, 0); } 5% { clip: rect(65px, 9999px, 9px, 0); } 10% { clip: rect(88px, 9999px, 24px, 0); } 15% { clip: rect(33px, 9999px, 36px, 0); } 20% { clip: rect(34px, 9999px, 16px, 0); } 25% { clip: rect(56px, 9999px, 61px, 0); } 30% { clip: rect(55px, 9999px, 19px, 0); } 35% { clip: rect(30px, 9999px, 62px, 0); } 40% { clip: rect(2px, 9999px, 90px, 0); } 45% { clip: rect(27px, 9999px, 54px, 0); } 50% { clip: rect(65px, 9999px, 84px, 0); } 55% { clip: rect(21px, 9999px, 89px, 0); } 60% { clip: rect(36px, 9999px, 81px, 0); } 65% { clip: rect(88px, 9999px, 4px, 0); } 70% { clip: rect(94px, 9999px, 53px, 0); } 75% { clip: rect(90px, 9999px, 98px, 0); } 80% { clip: rect(79px, 9999px, 36px, 0); } 85% { clip: rect(80px, 9999px, 26px, 0); } 90% { clip: rect(54px, 9999px, 70px, 0); } 95% { clip: rect(73px, 9999px, 50px, 0); } 100% { clip: rect(3px, 9999px, 50px, 0); } } @-o-keyframes c1 { 0% { clip: rect(27px, 9999px, 44px, 0); } 5% { clip: rect(65px, 9999px, 9px, 0); } 10% { clip: rect(88px, 9999px, 24px, 0); } 15% { clip: rect(33px, 9999px, 36px, 0); } 20% { clip: rect(34px, 9999px, 16px, 0); } 25% { clip: rect(56px, 9999px, 61px, 0); } 30% { clip: rect(55px, 9999px, 19px, 0); } 35% { clip: rect(30px, 9999px, 62px, 0); } 40% { clip: rect(2px, 9999px, 90px, 0); } 45% { clip: rect(27px, 9999px, 54px, 0); } 50% { clip: rect(65px, 9999px, 84px, 0); } 55% { clip: rect(21px, 9999px, 89px, 0); } 60% { clip: rect(36px, 9999px, 81px, 0); } 65% { clip: rect(88px, 9999px, 4px, 0); } 70% { clip: rect(94px, 9999px, 53px, 0); } 75% { clip: rect(90px, 9999px, 98px, 0); } 80% { clip: rect(79px, 9999px, 36px, 0); } 85% { clip: rect(80px, 9999px, 26px, 0); } 90% { clip: rect(54px, 9999px, 70px, 0); } 95% { clip: rect(73px, 9999px, 50px, 0); } 100% { clip: rect(3px, 9999px, 50px, 0); } } @keyframes c1 { 0% { clip: rect(27px, 9999px, 44px, 0); } 5% { clip: rect(65px, 9999px, 9px, 0); } 10% { clip: rect(88px, 9999px, 24px, 0); } 15% { clip: rect(33px, 9999px, 36px, 0); } 20% { clip: rect(34px, 9999px, 16px, 0); } 25% { clip: rect(56px, 9999px, 61px, 0); } 30% { clip: rect(55px, 9999px, 19px, 0); } 35% { clip: rect(30px, 9999px, 62px, 0); } 40% { clip: rect(2px, 9999px, 90px, 0); } 45% { clip: rect(27px, 9999px, 54px, 0); } 50% { clip: rect(65px, 9999px, 84px, 0); } 55% { clip: rect(21px, 9999px, 89px, 0); } 60% { clip: rect(36px, 9999px, 81px, 0); } 65% { clip: rect(88px, 9999px, 4px, 0); } 70% { clip: rect(94px, 9999px, 53px, 0); } 75% { clip: rect(90px, 9999px, 98px, 0); } 80% { clip: rect(79px, 9999px, 36px, 0); } 85% { clip: rect(80px, 9999px, 26px, 0); } 90% { clip: rect(54px, 9999px, 70px, 0); } 95% { clip: rect(73px, 9999px, 50px, 0); } 100% { clip: rect(3px, 9999px, 50px, 0); } } @-moz-keyframes c2 { 0% { clip: rect(72px, 9999px, 59px, 0); } 5% { clip: rect(24px, 9999px, 13px, 0); } 10% { clip: rect(66px, 9999px, 3px, 0); } 15% { clip: rect(12px, 9999px, 12px, 0); } 20% { clip: rect(19px, 9999px, 21px, 0); } 25% { clip: rect(56px, 9999px, 51px, 0); } 30% { clip: rect(77px, 9999px, 28px, 0); } 35% { clip: rect(71px, 9999px, 44px, 0); } 40% { clip: rect(35px, 9999px, 53px, 0); } 45% { clip: rect(17px, 9999px, 87px, 0); } 50% { clip: rect(48px, 9999px, 57px, 0); } 55% { clip: rect(31px, 9999px, 37px, 0); } 60% { clip: rect(30px, 9999px, 33px, 0); } 65% { clip: rect(18px, 9999px, 39px, 0); } 70% { clip: rect(4px, 9999px, 27px, 0); } 75% { clip: rect(40px, 9999px, 16px, 0); } 80% { clip: rect(86px, 9999px, 51px, 0); } 85% { clip: rect(46px, 9999px, 64px, 0); } 90% { clip: rect(11px, 9999px, 21px, 0); } 95% { clip: rect(44px, 9999px, 54px, 0); } 100% { clip: rect(25px, 9999px, 3px, 0); } 23% { transform: scaleX(0.8); } } @-webkit-keyframes c2 { 0% { clip: rect(72px, 9999px, 59px, 0); } 5% { clip: rect(24px, 9999px, 13px, 0); } 10% { clip: rect(66px, 9999px, 3px, 0); } 15% { clip: rect(12px, 9999px, 12px, 0); } 20% { clip: rect(19px, 9999px, 21px, 0); } 25% { clip: rect(56px, 9999px, 51px, 0); } 30% { clip: rect(77px, 9999px, 28px, 0); } 35% { clip: rect(71px, 9999px, 44px, 0); } 40% { clip: rect(35px, 9999px, 53px, 0); } 45% { clip: rect(17px, 9999px, 87px, 0); } 50% { clip: rect(48px, 9999px, 57px, 0); } 55% { clip: rect(31px, 9999px, 37px, 0); } 60% { clip: rect(30px, 9999px, 33px, 0); } 65% { clip: rect(18px, 9999px, 39px, 0); } 70% { clip: rect(4px, 9999px, 27px, 0); } 75% { clip: rect(40px, 9999px, 16px, 0); } 80% { clip: rect(86px, 9999px, 51px, 0); } 85% { clip: rect(46px, 9999px, 64px, 0); } 90% { clip: rect(11px, 9999px, 21px, 0); } 95% { clip: rect(44px, 9999px, 54px, 0); } 100% { clip: rect(25px, 9999px, 3px, 0); } 23% { transform: scaleX(0.8); } } @-o-keyframes c2 { 0% { clip: rect(72px, 9999px, 59px, 0); } 5% { clip: rect(24px, 9999px, 13px, 0); } 10% { clip: rect(66px, 9999px, 3px, 0); } 15% { clip: rect(12px, 9999px, 12px, 0); } 20% { clip: rect(19px, 9999px, 21px, 0); } 25% { clip: rect(56px, 9999px, 51px, 0); } 30% { clip: rect(77px, 9999px, 28px, 0); } 35% { clip: rect(71px, 9999px, 44px, 0); } 40% { clip: rect(35px, 9999px, 53px, 0); } 45% { clip: rect(17px, 9999px, 87px, 0); } 50% { clip: rect(48px, 9999px, 57px, 0); } 55% { clip: rect(31px, 9999px, 37px, 0); } 60% { clip: rect(30px, 9999px, 33px, 0); } 65% { clip: rect(18px, 9999px, 39px, 0); } 70% { clip: rect(4px, 9999px, 27px, 0); } 75% { clip: rect(40px, 9999px, 16px, 0); } 80% { clip: rect(86px, 9999px, 51px, 0); } 85% { clip: rect(46px, 9999px, 64px, 0); } 90% { clip: rect(11px, 9999px, 21px, 0); } 95% { clip: rect(44px, 9999px, 54px, 0); } 100% { clip: rect(25px, 9999px, 3px, 0); } 23% { transform: scaleX(0.8); } } @keyframes c2 { 0% { clip: rect(72px, 9999px, 59px, 0); } 5% { clip: rect(24px, 9999px, 13px, 0); } 10% { clip: rect(66px, 9999px, 3px, 0); } 15% { clip: rect(12px, 9999px, 12px, 0); } 20% { clip: rect(19px, 9999px, 21px, 0); } 25% { clip: rect(56px, 9999px, 51px, 0); } 30% { clip: rect(77px, 9999px, 28px, 0); } 35% { clip: rect(71px, 9999px, 44px, 0); } 40% { clip: rect(35px, 9999px, 53px, 0); } 45% { clip: rect(17px, 9999px, 87px, 0); } 50% { clip: rect(48px, 9999px, 57px, 0); } 55% { clip: rect(31px, 9999px, 37px, 0); } 60% { clip: rect(30px, 9999px, 33px, 0); } 65% { clip: rect(18px, 9999px, 39px, 0); } 70% { clip: rect(4px, 9999px, 27px, 0); } 75% { clip: rect(40px, 9999px, 16px, 0); } 80% { clip: rect(86px, 9999px, 51px, 0); } 85% { clip: rect(46px, 9999px, 64px, 0); } 90% { clip: rect(11px, 9999px, 21px, 0); } 95% { clip: rect(44px, 9999px, 54px, 0); } 100% { clip: rect(25px, 9999px, 3px, 0); } 23% { transform: scaleX(0.8); } } @-moz-keyframes clock-bag { 0% { transform: translate(4px, 5px); } 2% { transform: translate(1px, 2px); } 4% { transform: translate(2px, 3px); } 6% { transform: translate(3px, 1px); } 8% { transform: translate(2px, 3px); } 10% { transform: translate(2px, 3px); } 12% { transform: translate(2px, 1px); } 14% { transform: translate(5px, 3px); } 16% { transform: translate(3px, 2px); } 18% { transform: translate(2px, 5px); } 20% { transform: translate(3px, 3px); } 22% { transform: translate(2px, 3px); } 24% { transform: translate(2px, 4px); } 26% { transform: translate(5px, 2px); } 28% { transform: translate(3px, 2px); } 30% { transform: translate(4px, 1px); } 32% { transform: translate(1px, 2px); } 34% { transform: translate(4px, 5px); } 36% { transform: translate(4px, 3px); } 38% { transform: translate(3px, 3px); } 40% { transform: translate(2px, 2px); } 42% { transform: translate(1px, 4px); } 44% { transform: translate(4px, 5px); } 46.000000000000014% { transform: translate(2px, 5px); } 48% { transform: translate(1px, 3px); } 50% { transform: translate(5px, 5px); } 52% { transform: translate(5px, 3px); } 54% { transform: translate(1px, 5px); } 56.000000000000014% { transform: translate(2px, 4px); } 58% { transform: translate(1px, 3px); } 60% { transform: translate(1px, 2px); } 62% { transform: translate(4px, 2px); } 64% { transform: translate(2px, 4px); } 66.00000000000001% { transform: translate(4px, 3px); } 68% { transform: translate(2px, 4px); } 70% { transform: translate(5px, 2px); } 72% { transform: translate(4px, 3px); } 74% { transform: translate(3px, 5px); } 76% { transform: translate(5px, 4px); } 78% { transform: translate(4px, 2px); } 80% { transform: translate(3px, 2px); } 82% { transform: translate(2px, 3px); } 84% { transform: translate(2px, 4px); } 86% { transform: translate(3px, 1px); } 88% { transform: translate(1px, 1px); } 90% { transform: translate(5px, 3px); } 92.00000000000001% { transform: translate(5px, 4px); } 93.99999999999999% { transform: translate(5px, 2px); } 96% { transform: translate(1px, 5px); } 98% { transform: translate(4px, 4px); } 100% { transform: translate(3px, 1px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-webkit-keyframes clock-bag { 0% { transform: translate(4px, 5px); } 2% { transform: translate(1px, 2px); } 4% { transform: translate(2px, 3px); } 6% { transform: translate(3px, 1px); } 8% { transform: translate(2px, 3px); } 10% { transform: translate(2px, 3px); } 12% { transform: translate(2px, 1px); } 14% { transform: translate(5px, 3px); } 16% { transform: translate(3px, 2px); } 18% { transform: translate(2px, 5px); } 20% { transform: translate(3px, 3px); } 22% { transform: translate(2px, 3px); } 24% { transform: translate(2px, 4px); } 26% { transform: translate(5px, 2px); } 28% { transform: translate(3px, 2px); } 30% { transform: translate(4px, 1px); } 32% { transform: translate(1px, 2px); } 34% { transform: translate(4px, 5px); } 36% { transform: translate(4px, 3px); } 38% { transform: translate(3px, 3px); } 40% { transform: translate(2px, 2px); } 42% { transform: translate(1px, 4px); } 44% { transform: translate(4px, 5px); } 46.000000000000014% { transform: translate(2px, 5px); } 48% { transform: translate(1px, 3px); } 50% { transform: translate(5px, 5px); } 52% { transform: translate(5px, 3px); } 54% { transform: translate(1px, 5px); } 56.000000000000014% { transform: translate(2px, 4px); } 58% { transform: translate(1px, 3px); } 60% { transform: translate(1px, 2px); } 62% { transform: translate(4px, 2px); } 64% { transform: translate(2px, 4px); } 66.00000000000001% { transform: translate(4px, 3px); } 68% { transform: translate(2px, 4px); } 70% { transform: translate(5px, 2px); } 72% { transform: translate(4px, 3px); } 74% { transform: translate(3px, 5px); } 76% { transform: translate(5px, 4px); } 78% { transform: translate(4px, 2px); } 80% { transform: translate(3px, 2px); } 82% { transform: translate(2px, 3px); } 84% { transform: translate(2px, 4px); } 86% { transform: translate(3px, 1px); } 88% { transform: translate(1px, 1px); } 90% { transform: translate(5px, 3px); } 92.00000000000001% { transform: translate(5px, 4px); } 93.99999999999999% { transform: translate(5px, 2px); } 96% { transform: translate(1px, 5px); } 98% { transform: translate(4px, 4px); } 100% { transform: translate(3px, 1px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-o-keyframes clock-bag { 0% { transform: translate(4px, 5px); } 2% { transform: translate(1px, 2px); } 4% { transform: translate(2px, 3px); } 6% { transform: translate(3px, 1px); } 8% { transform: translate(2px, 3px); } 10% { transform: translate(2px, 3px); } 12% { transform: translate(2px, 1px); } 14% { transform: translate(5px, 3px); } 16% { transform: translate(3px, 2px); } 18% { transform: translate(2px, 5px); } 20% { transform: translate(3px, 3px); } 22% { transform: translate(2px, 3px); } 24% { transform: translate(2px, 4px); } 26% { transform: translate(5px, 2px); } 28% { transform: translate(3px, 2px); } 30% { transform: translate(4px, 1px); } 32% { transform: translate(1px, 2px); } 34% { transform: translate(4px, 5px); } 36% { transform: translate(4px, 3px); } 38% { transform: translate(3px, 3px); } 40% { transform: translate(2px, 2px); } 42% { transform: translate(1px, 4px); } 44% { transform: translate(4px, 5px); } 46.000000000000014% { transform: translate(2px, 5px); } 48% { transform: translate(1px, 3px); } 50% { transform: translate(5px, 5px); } 52% { transform: translate(5px, 3px); } 54% { transform: translate(1px, 5px); } 56.000000000000014% { transform: translate(2px, 4px); } 58% { transform: translate(1px, 3px); } 60% { transform: translate(1px, 2px); } 62% { transform: translate(4px, 2px); } 64% { transform: translate(2px, 4px); } 66.00000000000001% { transform: translate(4px, 3px); } 68% { transform: translate(2px, 4px); } 70% { transform: translate(5px, 2px); } 72% { transform: translate(4px, 3px); } 74% { transform: translate(3px, 5px); } 76% { transform: translate(5px, 4px); } 78% { transform: translate(4px, 2px); } 80% { transform: translate(3px, 2px); } 82% { transform: translate(2px, 3px); } 84% { transform: translate(2px, 4px); } 86% { transform: translate(3px, 1px); } 88% { transform: translate(1px, 1px); } 90% { transform: translate(5px, 3px); } 92.00000000000001% { transform: translate(5px, 4px); } 93.99999999999999% { transform: translate(5px, 2px); } 96% { transform: translate(1px, 5px); } 98% { transform: translate(4px, 4px); } 100% { transform: translate(3px, 1px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @keyframes clock-bag { 0% { transform: translate(4px, 5px); } 2% { transform: translate(1px, 2px); } 4% { transform: translate(2px, 3px); } 6% { transform: translate(3px, 1px); } 8% { transform: translate(2px, 3px); } 10% { transform: translate(2px, 3px); } 12% { transform: translate(2px, 1px); } 14% { transform: translate(5px, 3px); } 16% { transform: translate(3px, 2px); } 18% { transform: translate(2px, 5px); } 20% { transform: translate(3px, 3px); } 22% { transform: translate(2px, 3px); } 24% { transform: translate(2px, 4px); } 26% { transform: translate(5px, 2px); } 28% { transform: translate(3px, 2px); } 30% { transform: translate(4px, 1px); } 32% { transform: translate(1px, 2px); } 34% { transform: translate(4px, 5px); } 36% { transform: translate(4px, 3px); } 38% { transform: translate(3px, 3px); } 40% { transform: translate(2px, 2px); } 42% { transform: translate(1px, 4px); } 44% { transform: translate(4px, 5px); } 46.000000000000014% { transform: translate(2px, 5px); } 48% { transform: translate(1px, 3px); } 50% { transform: translate(5px, 5px); } 52% { transform: translate(5px, 3px); } 54% { transform: translate(1px, 5px); } 56.000000000000014% { transform: translate(2px, 4px); } 58% { transform: translate(1px, 3px); } 60% { transform: translate(1px, 2px); } 62% { transform: translate(4px, 2px); } 64% { transform: translate(2px, 4px); } 66.00000000000001% { transform: translate(4px, 3px); } 68% { transform: translate(2px, 4px); } 70% { transform: translate(5px, 2px); } 72% { transform: translate(4px, 3px); } 74% { transform: translate(3px, 5px); } 76% { transform: translate(5px, 4px); } 78% { transform: translate(4px, 2px); } 80% { transform: translate(3px, 2px); } 82% { transform: translate(2px, 3px); } 84% { transform: translate(2px, 4px); } 86% { transform: translate(3px, 1px); } 88% { transform: translate(1px, 1px); } 90% { transform: translate(5px, 3px); } 92.00000000000001% { transform: translate(5px, 4px); } 93.99999999999999% { transform: translate(5px, 2px); } 96% { transform: translate(1px, 5px); } 98% { transform: translate(4px, 4px); } 100% { transform: translate(3px, 1px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-moz-keyframes tr-bag { 0% { transform: translate(2px, 1px); } 2% { transform: translate(2px, 4px); } 4% { transform: translate(1px, 4px); } 6% { transform: translate(3px, 4px); } 8% { transform: translate(3px, 2px); } 10% { transform: translate(5px, 5px); } 12% { transform: translate(2px, 2px); } 14% { transform: translate(3px, 5px); } 16% { transform: translate(1px, 2px); } 18% { transform: translate(2px, 2px); } 20% { transform: translate(5px, 5px); } 22% { transform: translate(3px, 2px); } 24% { transform: translate(1px, 1px); } 26% { transform: translate(2px, 2px); } 28% { transform: translate(1px, 4px); } 30% { transform: translate(3px, 2px); } 32% { transform: translate(1px, 1px); } 34% { transform: translate(2px, 4px); } 36% { transform: translate(1px, 5px); } 38% { transform: translate(1px, 4px); } 40% { transform: translate(5px, 5px); } 42% { transform: translate(5px, 3px); } 44% { transform: translate(4px, 1px); } 46.000000000000014% { transform: translate(4px, 2px); } 48% { transform: translate(2px, 1px); } 50% { transform: translate(4px, 1px); } 52% { transform: translate(2px, 4px); } 54% { transform: translate(1px, 2px); } 56.000000000000014% { transform: translate(2px, 1px); } 58% { transform: translate(1px, 4px); } 60% { transform: translate(2px, 1px); } 62% { transform: translate(2px, 2px); } 64% { transform: translate(4px, 1px); } 66.00000000000001% { transform: translate(2px, 1px); } 68% { transform: translate(5px, 3px); } 70% { transform: translate(1px, 1px); } 72% { transform: translate(2px, 5px); } 74% { transform: translate(2px, 5px); } 76% { transform: translate(3px, 3px); } 78% { transform: translate(3px, 4px); } 80% { transform: translate(1px, 3px); } 82% { transform: translate(4px, 2px); } 84% { transform: translate(2px, 1px); } 86% { transform: translate(4px, 3px); } 88% { transform: translate(4px, 5px); } 90% { transform: translate(1px, 1px); } 92.00000000000001% { transform: translate(2px, 4px); } 93.99999999999999% { transform: translate(3px, 5px); } 96% { transform: translate(2px, 3px); } 98% { transform: translate(1px, 3px); } 100% { transform: translate(4px, 5px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-webkit-keyframes tr-bag { 0% { transform: translate(2px, 1px); } 2% { transform: translate(2px, 4px); } 4% { transform: translate(1px, 4px); } 6% { transform: translate(3px, 4px); } 8% { transform: translate(3px, 2px); } 10% { transform: translate(5px, 5px); } 12% { transform: translate(2px, 2px); } 14% { transform: translate(3px, 5px); } 16% { transform: translate(1px, 2px); } 18% { transform: translate(2px, 2px); } 20% { transform: translate(5px, 5px); } 22% { transform: translate(3px, 2px); } 24% { transform: translate(1px, 1px); } 26% { transform: translate(2px, 2px); } 28% { transform: translate(1px, 4px); } 30% { transform: translate(3px, 2px); } 32% { transform: translate(1px, 1px); } 34% { transform: translate(2px, 4px); } 36% { transform: translate(1px, 5px); } 38% { transform: translate(1px, 4px); } 40% { transform: translate(5px, 5px); } 42% { transform: translate(5px, 3px); } 44% { transform: translate(4px, 1px); } 46.000000000000014% { transform: translate(4px, 2px); } 48% { transform: translate(2px, 1px); } 50% { transform: translate(4px, 1px); } 52% { transform: translate(2px, 4px); } 54% { transform: translate(1px, 2px); } 56.000000000000014% { transform: translate(2px, 1px); } 58% { transform: translate(1px, 4px); } 60% { transform: translate(2px, 1px); } 62% { transform: translate(2px, 2px); } 64% { transform: translate(4px, 1px); } 66.00000000000001% { transform: translate(2px, 1px); } 68% { transform: translate(5px, 3px); } 70% { transform: translate(1px, 1px); } 72% { transform: translate(2px, 5px); } 74% { transform: translate(2px, 5px); } 76% { transform: translate(3px, 3px); } 78% { transform: translate(3px, 4px); } 80% { transform: translate(1px, 3px); } 82% { transform: translate(4px, 2px); } 84% { transform: translate(2px, 1px); } 86% { transform: translate(4px, 3px); } 88% { transform: translate(4px, 5px); } 90% { transform: translate(1px, 1px); } 92.00000000000001% { transform: translate(2px, 4px); } 93.99999999999999% { transform: translate(3px, 5px); } 96% { transform: translate(2px, 3px); } 98% { transform: translate(1px, 3px); } 100% { transform: translate(4px, 5px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-o-keyframes tr-bag { 0% { transform: translate(2px, 1px); } 2% { transform: translate(2px, 4px); } 4% { transform: translate(1px, 4px); } 6% { transform: translate(3px, 4px); } 8% { transform: translate(3px, 2px); } 10% { transform: translate(5px, 5px); } 12% { transform: translate(2px, 2px); } 14% { transform: translate(3px, 5px); } 16% { transform: translate(1px, 2px); } 18% { transform: translate(2px, 2px); } 20% { transform: translate(5px, 5px); } 22% { transform: translate(3px, 2px); } 24% { transform: translate(1px, 1px); } 26% { transform: translate(2px, 2px); } 28% { transform: translate(1px, 4px); } 30% { transform: translate(3px, 2px); } 32% { transform: translate(1px, 1px); } 34% { transform: translate(2px, 4px); } 36% { transform: translate(1px, 5px); } 38% { transform: translate(1px, 4px); } 40% { transform: translate(5px, 5px); } 42% { transform: translate(5px, 3px); } 44% { transform: translate(4px, 1px); } 46.000000000000014% { transform: translate(4px, 2px); } 48% { transform: translate(2px, 1px); } 50% { transform: translate(4px, 1px); } 52% { transform: translate(2px, 4px); } 54% { transform: translate(1px, 2px); } 56.000000000000014% { transform: translate(2px, 1px); } 58% { transform: translate(1px, 4px); } 60% { transform: translate(2px, 1px); } 62% { transform: translate(2px, 2px); } 64% { transform: translate(4px, 1px); } 66.00000000000001% { transform: translate(2px, 1px); } 68% { transform: translate(5px, 3px); } 70% { transform: translate(1px, 1px); } 72% { transform: translate(2px, 5px); } 74% { transform: translate(2px, 5px); } 76% { transform: translate(3px, 3px); } 78% { transform: translate(3px, 4px); } 80% { transform: translate(1px, 3px); } 82% { transform: translate(4px, 2px); } 84% { transform: translate(2px, 1px); } 86% { transform: translate(4px, 3px); } 88% { transform: translate(4px, 5px); } 90% { transform: translate(1px, 1px); } 92.00000000000001% { transform: translate(2px, 4px); } 93.99999999999999% { transform: translate(3px, 5px); } 96% { transform: translate(2px, 3px); } 98% { transform: translate(1px, 3px); } 100% { transform: translate(4px, 5px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @keyframes tr-bag { 0% { transform: translate(2px, 1px); } 2% { transform: translate(2px, 4px); } 4% { transform: translate(1px, 4px); } 6% { transform: translate(3px, 4px); } 8% { transform: translate(3px, 2px); } 10% { transform: translate(5px, 5px); } 12% { transform: translate(2px, 2px); } 14% { transform: translate(3px, 5px); } 16% { transform: translate(1px, 2px); } 18% { transform: translate(2px, 2px); } 20% { transform: translate(5px, 5px); } 22% { transform: translate(3px, 2px); } 24% { transform: translate(1px, 1px); } 26% { transform: translate(2px, 2px); } 28% { transform: translate(1px, 4px); } 30% { transform: translate(3px, 2px); } 32% { transform: translate(1px, 1px); } 34% { transform: translate(2px, 4px); } 36% { transform: translate(1px, 5px); } 38% { transform: translate(1px, 4px); } 40% { transform: translate(5px, 5px); } 42% { transform: translate(5px, 3px); } 44% { transform: translate(4px, 1px); } 46.000000000000014% { transform: translate(4px, 2px); } 48% { transform: translate(2px, 1px); } 50% { transform: translate(4px, 1px); } 52% { transform: translate(2px, 4px); } 54% { transform: translate(1px, 2px); } 56.000000000000014% { transform: translate(2px, 1px); } 58% { transform: translate(1px, 4px); } 60% { transform: translate(2px, 1px); } 62% { transform: translate(2px, 2px); } 64% { transform: translate(4px, 1px); } 66.00000000000001% { transform: translate(2px, 1px); } 68% { transform: translate(5px, 3px); } 70% { transform: translate(1px, 1px); } 72% { transform: translate(2px, 5px); } 74% { transform: translate(2px, 5px); } 76% { transform: translate(3px, 3px); } 78% { transform: translate(3px, 4px); } 80% { transform: translate(1px, 3px); } 82% { transform: translate(4px, 2px); } 84% { transform: translate(2px, 1px); } 86% { transform: translate(4px, 3px); } 88% { transform: translate(4px, 5px); } 90% { transform: translate(1px, 1px); } 92.00000000000001% { transform: translate(2px, 4px); } 93.99999999999999% { transform: translate(3px, 5px); } 96% { transform: translate(2px, 3px); } 98% { transform: translate(1px, 3px); } 100% { transform: translate(4px, 5px); } 1% { transform: scaleY(1) skewX(0deg); } 1.5% { transform: scaleY(3) skewX(-60deg); } 2% { transform: scaleY(1) skewX(0deg); } 51% { transform: scaleX(1) scaleY(1) skewX(0deg); } 52% { transform: scaleX(1.5) scaleY(0.2) skewX(80deg); } 53% { transform: scaleX(1) scaleY(1) skewX(0deg); } } @-moz-keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; } } @-webkit-keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; } } @-o-keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; } } @keyframes bg-move { 0% { background-position: 0 0; } 100% { background-position: 0 -32px; } }
JAVASCRIPT
$(document).ready(function () { function second_passed() { $('.clock').removeClass('is-off'); } setTimeout(second_passed, 2000) $('.sw').on('click', function(e) { e.preventDefault(); $('.wrap').toggleClass('glitch'); }); var newDate = new Date(); newDate.setDate(newDate.getDate()); setInterval( function() { var hours = new Date().getHours(); var seconds = new Date().getSeconds(); var minutes = new Date().getMinutes(); var realTime = ( hours < 10 ? '0' : '' ) + hours + ' : ' + ( minutes < 10 ? '0' : '' ) + minutes + ' : ' + ( seconds < 10 ? '0' : '' ) + seconds $('.time').html(realTime); $('.time').attr('data-time', realTime); }, 1000); });
Expand for more options Login