Орущий кот
[html]<style>
/* ---------------------------------- Title ---------------------------------- */
h1 {
font-size: 2em;
text-align: center;
color: red;
}
/* ---------------------------------- Parts of body ---------------------------------- */
.cat {
position: relative;
margin: 0px auto;
width: 400px;
height: 400px;
background: transparent;
}
.head {
position: absolute;
left: 60px;
top: 30px;
width: 280px;
height: 250px;
background: #000;
-webkit-border-radius: 280px/250px;
-khtml-border-radius: 280px/250px;
-moz-border-radius: 280px/250px;
-o-border-radius: 280px/250px;
border-radius: 280px/250px;
}
.body {
position: absolute;
left: 165px;
top: 250px;
width: 66px;
height: 125px;
background: #000;
-webkit-border-radius: 66px/125px;
-khtml-border-radius: 66px/125px;
-moz-border-radius: 66px/125px;
-o-border-radius: 66px/125px;
border-radius: 66px/125px;
}
/* ---------------------------------- Legs/Paws ---------------------------------- */
.left-leg, .right-leg {
position: absolute;
top: 327px;
width: 25px;
height: 60px;
background: #000;
-webkit-border-radius: 25px/60px;
-khtml-border-radius: 25px/60px;
-moz-border-radius: 25px/60px;
-o-border-radius: 25px/60px;
border-radius: 25px/60px;
}
.left-leg {
left: 207px;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.right-leg {
left: 163px;
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.left-paw, .right-paw {
position: absolute;
top: 350px;
width: 15px;
height: 35px;
background: #000;
-webkit-border-radius: 16px/35px;
-khtml-border-radius: 16px/35px;
-moz-border-radius: 16px/35px;
-o-border-radius: 16px/35px;
border-radius: 16px/35px;
}
.left-paw {
left: 205px;
}
.right-paw {
left: 180px;
}
/* ---------------------------------- Ears ---------------------------------- */
.left-ear, .right-ear {
position: absolute;
top: 40px;
width: 30px;
height: 60px;
background: #000;
-webkit-border-radius: 30px/60px;
-khtml-border-radius: 30px/60px;
-moz-border-radius: 30px/60px;
-o-border-radius: 30px/60px;
border-radius: 30px/60px;
-webkit-transform-origin: 15px 60px;
-moz-transform-origin: 15px 60px;
-o-transform-origin: 15px 60px;
}
.left-ear {
left: 300px;
-webkit-animation: left-ear 3s infinite linear normal none;
-moz-animation: left-ear 3s infinite linear normal none;
}
.right-ear {
left: 70px;
-webkit-animation: right-ear 3s infinite linear normal none;
-moz-animation: right-ear 3s infinite linear normal none;
}
/* ---------------------------------- Whiskers ---------------------------------- */
.left-whiskers, .right-whiskers {
position: absolute;
top: 140px;
width: 45px;
height: 30px;
}
.left-whiskers {
left: 330px;
-webkit-transform-origin: 0px 15px;
-moz-transform-origin: 0px 15px;
-o-transform-origin: 0px 15px;
-webkit-animation: left-whiskers 3s infinite linear normal none;
-moz-animation: left-whiskers 3s infinite linear normal none;
}
.right-whiskers {
left: 25px;
-webkit-transform-origin: 45px 15px;
-moz-transform-origin: 45px 15px;
-o-transform-origin: 45px 15px;
-webkit-animation: right-whiskers 3s infinite linear normal none;
-moz-animation: right-whiskers 3s infinite linear normal none;
}
.w1, .w3, .w5, .w2, .w4, .w6 {
position: absolute;
left: 0px;
width: 45px;
height: 3px;
background: #000;
}
.w1, .w2 {
top: 15px;
}
.w3 {
top: 8px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.w5 {
top: 22px;
-webkit-transform: rotate(-355deg);
-moz-transform: rotate(-355deg);
-ms-transform: rotate(-355deg);
-o-transform: rotate(-355deg);
transform: rotate(-355deg);
}
.w4 {
top: 8px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
-o-transform: rotate(5deg);
transform: rotate(5deg);
}
.w6 {
top: 22px;
-webkit-transform: rotate(355deg);
-moz-transform: rotate(355deg);
-ms-transform: rotate(355deg);
-o-transform: rotate(355deg);
transform: rotate(355deg);
}
/* ---------------------------------- Eyes ---------------------------------- */
.left-eye, .right-eye {
position: absolute;
top: 95px;
width: 48px;
height: 48px;
background: #fff;
-webkit-border-radius: 48px;
-khtml-border-radius: 48px;
-moz-border-radius: 48px;
-o-border-radius: 48px;
border-radius: 48px;
}
.left-eye {
left: 271px;
-webkit-animation: left-eye 3s infinite linear normal none;
-moz-animation: left-eye 3s infinite linear normal none;
}
.right-eye {
left: 81px;
-webkit-animation: right-eye 3s infinite linear normal none;
-moz-animation: right-eye 3s infinite linear normal none;
}
.left-pupil, .right-pupil {
position: absolute;
left: 17px;
top: 15px;
width: 15px;
height: 15px;
background: #000;
-webkit-border-radius: 15px;
-khtml-border-radius: 15px;
-moz-border-radius: 15px;
-o-border-radius: 15px;
border-radius: 15px;
}
.left-pupil {
-webkit-animation: left-pupil 3s infinite linear normal none;
-moz-animation: left-pupil 3s infinite linear normal none;
}
.right-pupil {
-webkit-animation: right-pupil 3s infinite linear normal none;
-moz-animation: right-pupil 3s infinite linear normal none;
}
/* ---------------------------------- Tail ---------------------------------- */
.tail {
position: absolute;
left: 200px;
top: 290px;
width: 85px;
height: 70px;
background: transparent;
border: 5px solid #000;
border-top: none;
border-left: none;
-webkit-border-radius: 85px/70px;
-khtml-border-radius: 85px/70px;
-moz-border-radius: 85px/70px;
-o-border-radius: 85px/70px;
border-radius: 85px/70px;
}
/* ---------------------------------- Mouth ---------------------------------- */
.mouth {
position: absolute;
left: 192px;
top: 245px;
width: 16px;
height: 5px;
background: #900;
border: 1px solid #600;
-webkit-border-radius: 16px/5px;
-khtml-border-radius: 16px/5px;
-moz-border-radius: 16px/5px;
-o-border-radius: 16px/5px;
border-radius: 16px/5px;
opacity: 0;
-webkit-animation: mouth 3s infinite linear normal none;
-moz-animation: mouth 3s infinite linear normal none;
}
/* ---------------------------------- Teeth ---------------------------------- */
.tooth-tl, .tooth-tr, .tooth-bl, .tooth-br {
position: absolute;
left: 50%;
width: 0px;
height: 0px;
-moz-transform: scale(0);
}
.tooth-tl, .tooth-tr {
top: 2px;
border-bottom: 12px solid transparent;
border-top: 8px solid transparent;
}
.tooth-bl, .tooth-br {
bottom: 2px;
border-bottom: 8px solid transparent;
border-top: 12px solid transparent;
}
.tooth-tl {
margin-left: 5px;
border-left: 10px solid #fff;
-webkit-animation: tooth-tl 3s infinite linear normal none;
-moz-animation: tooth-tl 3s infinite linear normal none;
}
.tooth-tr {
margin-left: -15px;
border-right: 10px solid #fff;
-webkit-animation: tooth-tr 3s infinite linear normal none;
-moz-animation: tooth-tr 3s infinite linear normal none;
}
.tooth-bl {
margin-left: 5px;
border-left: 10px solid #fff;
-webkit-animation: tooth-bl 3s infinite linear normal none;
-moz-animation: tooth-bl 3s infinite linear normal none;
}
.tooth-br {
margin-left: -15px;
border-right: 10px solid #fff;
-webkit-animation: tooth-br 3s infinite linear normal none;
-moz-animation: tooth-br 3s infinite linear normal none;
}
/* ---------------------------------- Mouth Else ---------------------------------- */
.tongue {
position: absolute;
left: 50%;
margin-left: -40px;
bottom: -8px;
width: 80px;
height: 30px;
background: #f66;
-webkit-border-radius: 80px/30px;
-khtml-border-radius: 80px/30px;
-moz-border-radius: 80px/30px;
-o-border-radius: 80px/30px;
border-radius: 80px/30px;
-moz-transform: scale(0);
-webkit-animation: tongue 3s infinite linear normal none;
-moz-animation: tongue 3s infinite linear normal none;
}
.throat {
position: absolute;
left: 50%;
margin-left: -25px;
bottom: -70px;
width: 50px;
height: 70px;
background: #300;
-webkit-border-radius: 60px;
-khtml-border-radius: 60px;
-moz-border-radius: 60px;
-o-border-radius: 60px;
border-radius: 60px;
-moz-transform: scale(0);
-webkit-animation: throat 3s infinite linear normal none;
-moz-animation: throat 3s infinite linear normal none;
}
.uvula {
position: absolute;
left: 50%;
margin-left: -5px;
top: -20px;
width: 10px;
height: 50px;
background: #900;
-webkit-border-radius: 10px/50px;
-khtml-border-radius: 10px/50px;
-moz-border-radius: 10px/50px;
-o-border-radius: 10px/50px;
border-radius: 10px/50px;
-webkit-transform-origin: 5px 0px;
-moz-transform-origin: 5px 0px;
-moz-transform: scale(1);
-webkit-animation: uvula 0.1s 2s infinite linear normal none;
-moz-animation: uvula 0.1s 2s infinite linear normal none;
}
/* ---------------------------------- ---------------------------------- */
@-moz-keyframes left-ear {
0% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
40% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
42% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
44% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
46% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
48% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
50% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
80% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
82% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
84% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
86% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
88% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
100% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
}
@-moz-keyframes right-ear {
0% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
40% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
42% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
44% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
46% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
48% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
50% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
80% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
82% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
84% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
86% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
88% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
100% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
}
@-moz-keyframes left-whiskers {
0% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
40% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
42% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
44% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
46% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
48% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
50% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
80% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
82% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
84% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
86% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
88% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
100% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
}
@-moz-keyframes right-whiskers {
0% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
40% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
42% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
44% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
46% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
48% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
50% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
80% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
82% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
84% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
86% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
88% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
100% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
}
@-moz-keyframes left-eye {
0% {height: 48px; top: 95px; border-radius: 48px;}
40% {height: 48px; top: 95px; border-radius: 48px;}
50% {height: 0px; top: 90px; border-radius: 40px/5px;}
80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}
@-moz-keyframes right-eye {
0% {height: 48px; top: 95px; border-radius: 48px;}
40% {height: 48px; top: 95px; border-radius: 48px;}
50% {height: 0px; top: 90px; border-radius: 40px/5px;}
80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}
@-moz-keyframes left-pupil {
0% {top: 15px;}
40% {top: 15px;}
50% {top: -7px;}
100% {top: 15px;}
}
@-moz-keyframes right-pupil {
0% {top: 15px;}
40% {top: 15px;}
50% {top: -7px;}
100% {top: 15px;}
}
@-moz-keyframes mouth {
0% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
40% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
55% {top: 45px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
60% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
85% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
99% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
100% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
}
@-moz-keyframes tooth-tl {
0% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
55% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
60% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
85% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
99% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; top: 2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-tr {
0% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
55% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
60% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
85% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
99% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; top: 2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-bl {
0% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
55% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
60% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
85% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
99% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; bottom: 2px; -moz-transform: scale(0);}
}
@-moz-keyframes tooth-br {
0% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
55% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
60% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
85% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
99% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; bottom: 2px; -moz-transform: scale(0);}
}
@-moz-keyframes throat {
0% {bottom: -70px; -moz-transform: scale(0);}
40% {bottom: -70px; -moz-transform: scale(0);}
55% {bottom: -50px; -moz-transform: scale(0.1);}
60% {bottom: 0px; -moz-transform: scale(1);}
85% {bottom: 0px; -moz-transform: scale(1);}
99% {bottom: -30px; -moz-transform: scale(0.1);}
100% {bottom: -70px; -moz-transform: scale(0);}
}
@-moz-keyframes tongue {
0% {-moz-transform: scale(0);}
40% {-moz-transform: scale(0);}
55% {-moz-transform: scale(0.1);}
60% {-moz-transform: scale(1);}
85% {-moz-transform: scale(1);}
99% {-moz-transform: scale(0.1);}
100% {-moz-transform: scale(0);}
}
@-moz-keyframes uvula {
0% {-moz-transform: rotate(0deg);}
25% {-moz-transform: rotate(5deg);}
50% {-moz-transform: rotate(0deg);}
75% {-moz-transform: rotate(-5deg);}
100% {-moz-transform: rotate(0deg);}
}
/* Else Google */
@-webkit-keyframes left-ear {
0% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
44% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
46% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
48% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
50% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
80% {left:315px; top:90px; -webkit-transform:rotate(150deg);}
82% {left:310px; top:80px; -webkit-transform:rotate(120deg);}
84% {left:306px; top:70px; -webkit-transform:rotate(90deg);}
86% {left:304px; top:60px; -webkit-transform:rotate(60deg);}
88% {left:302px; top:50px; -webkit-transform:rotate(30deg);}
100% {left:300px; top:40px; -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes right-ear {
0% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
40% {left:70px; top:40px; -webkit-transform:rotate(0deg);}
42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);}
82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);}
84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);}
86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);}
88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);}
100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);}
}
@-webkit-keyframes left-whiskers {
0% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);}
82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);}
84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);}
86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);}
88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);}
100% {left:330px; top:140px; -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes right-whiskers {
0% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
40% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
42% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
44% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
46% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
48% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
50% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
80% {left:90px; top:50px; -webkit-transform:rotate(50deg);}
82% {left:75px; top:60px; -webkit-transform:rotate(40deg);}
84% {left:55px; top:80px; -webkit-transform:rotate(30deg);}
86% {left:45px; top:100px; -webkit-transform:rotate(20deg);}
88% {left:35px; top:120px; -webkit-transform:rotate(10deg);}
100% {left:25px; top:140px; -webkit-transform:rotate(0deg);}
}
@-webkit-keyframes left-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-webkit-keyframes right-eye {
0% {height:48px; top:95px; border-radius:48px;}
40% {height:48px; top:95px; border-radius:48px;}
50% {height:0; top:90px; border-radius: 40px/5px;}
80% {height:0; top:90px; border-radius: 40px/5px;}
100% {height:48px;}
}
@-webkit-keyframes left-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-webkit-keyframes right-pupil {
0% {top:15px;}
40% {top:15px;}
50% {top:-7px;}
100% {top:15px;}
}
@-webkit-keyframes mouth {
0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;}
99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;}
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;}
}
@-webkit-keyframes tooth-tl {
0% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; top:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-tr {
0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-bl {
0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tooth-br {
0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);}
99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);}
100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);}
}
@-webkit-keyframes throat {
0% {bottom:-70px; -webkit-transform: scale(0);}
40% {bottom:-70px; -webkit-transform: scale(0);}
55% {bottom:-50px; -webkit-transform: scale(0.1);}
60% {bottom:0; -webkit-transform: scale(1);}
85% {bottom:0; -webkit-transform: scale(1);}
99% {bottom:-30px; -webkit-transform: scale(0.1);}
100% {bottom:-70px; -webkit-transform: scale(0);}
}
@-webkit-keyframes tongue {
0% {-webkit-transform: scale(0);}
40% {-webkit-transform: scale(0);}
55% {-webkit-transform: scale(0.1);}
60% {-webkit-transform: scale(1);}
85% {-webkit-transform: scale(1);}
99% {-webkit-transform: scale(0.1);}
100% {-webkit-transform: scale(0);}
}
@-webkit-keyframes uvula {
0% {-webkit-transform:rotate(0deg);}
25% {-webkit-transform:rotate(5deg);}
50% {-webkit-transform:rotate(0deg);}
75% {-webkit-transform:rotate(-5deg);}
100% {-webkit-transform:rotate(0deg);}
}
</style><div id="content"><div id="info"><div class="cat"><div class="head"></div><div class="body"></div><div class="left-leg"></div><div class="right-leg"></div><div class="left-paw"></div><div class="right-paw"></div><div class="left-ear"></div><div class="right-ear"></div><div class="left-whiskers"><div class="w1"></div><div class="w3"></div><div class="w5"></div>
</div><div class="right-whiskers"><div class="w2"></div><div class="w4"></div><div class="w6"></div>
</div><div class="left-eye"><div class="left-pupil"></div>
</div><div class="right-eye"><div class="right-pupil"></div>
</div><div class="tail"></div><div class="mouth"><div class="tooth-tl"></div><div class="tooth-tr"></div><div class="tooth-bl"></div><div class="tooth-br"></div><div class="throat"><div class="uvula"></div>
</div><div class="tongue"></div>
</div>
</div>
</div>
</div>[/html]
- Подпись автора
[html]<div class="div1"><div class="div2"><a href="https://scratch.mit.edu/users/AGScratcherBest-2">Скретч</a><div class="dot"></div><a href="https://discord.gg/gbKEB6hnTy">Discord</a><div class="dot"></div><a href="https://clck.ru/3J6GDx">Matrix</a><div class="dot"></div><a href="https://agsb.miraheze.org/">Вики</a><div class="dot"></div><a href="https://shitpost.poridge.club/@AGScratcherBest">Sharkey</a></div></div><style>.div1 {background: radial-gradient(circle, #072e4b 45%, #08314e 10%) repeat;background-size: 35px 35px; /* Размер сетки точек */background-attachment: fixed;padding: 2em;border-radius: 1em;}.div2 {background-color: #041521;padding: 1em;border-radius: 3px;display: flex;}a {padding: 0 !important;display: block;color: #83d3f9 !important;font-size: 1.5em;font-weight: bold;margin: 0 !important;text-decoration:none!important;}a:first-child {margin-left:auto!important;}a:last-child {margin-right:auto!important;}.dot {background-color: #83d3f930;width: 5.5px;height:5.5px;margin:auto 7.5px;border-radius:50%;}</style>[/html]
: слыш, лайкать!
!
А у меня дождик!
Неприватней только Яндекс.
:
):
Кроме того Ютуб заменяет спотифай и другие сервисы для прослушивания музыки.
?
