如何在HTML中写一个宠物,CSS3 宠物猫

CSS

语言：

CSSSCSS

确定

@import url(https://fonts.googleapis.com/css?family=NTR|Roboto+Slab:400,300|Gravitas+One|Nunito:400,700,300);

@keyframes nosetwitch {

from {

top: -200px;

left: 265px;

}

to {

top: -205px;

left: 265px;

}

}

body {

background-color: rgb(249, 168, 192);

color: rgb(240, 24, 89);

font-family: sans-serif;

}

h1 {

text-align: center;

font-family: 'Roboto Slab', serif;

font-weight: 300;

font-size: 42px;

}

h2 {

text-align: center;

text-transform: uppercase;

font-size: small;

letter-spacing: 4px;

font-family: 'NTR', sans-serif;

}

h3 {

text-align: center;

font-family: NTR;

font-size: 2em;

color: rgba(255, 255, 255, 0.3);

letter-spacing: 5px;

text-transform: uppercase;

}

hr {

width: 25%;

height: 2px;

margin-left: auto;

margin-right: auto;

background-color: rgb(240, 24, 89);

border: 0 none;

}

.number {

text-align: center;

text-transform: uppercase;

font-size: 42px;

font-family: 'Gravitas One', serif;

}

#cat {

margin: 0 auto;

width: 600px;

height: 420px;

}

#body {

position: relative;

top: 220px;

left: 137px;

width: 280px;

height: 220px;

background: white;

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

}

.ears-1 {

position: relative;

background-color: rgb(241, 233, 233);

top: -20px;

left: 200px;

z-index: -1;

}

.ears-1:before,

.ears-1:after {

content: '';

position: absolute;

background-color: inherit;

}

.ears-1,

.ears-1:before,

.ears-1:after {

width: 2em;

height: 2em;

border-top-right-radius: 20%;

}

.ears-1 {

transform: rotate(-60deg) skewX(-30deg) scale(1, .866);

}

.ears-1:before {

transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);

}

.ears-1:after {

transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);

}

.ears-2 {

position: relative;

background-color: rgb(241, 233, 233);

top: -52px;

left: 320px;

z-index: -1;

}

.ears-2:before,

.ears-2:after {

content: '';

position: absolute;

background-color: inherit;

}

.ears-2,

.ears-2:before,

.ears-2:after {

width: 2em;

height: 2em;

border-top-right-radius: 20%;

}

.ears-2 {

transform: rotate(-60deg) skewX(-30deg) scale(1, .866);

}

.ears-2:before {

transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);

}

.ears-2:after {

transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);

}

.eye-left {

position: relative;

top: -18px;

left: 183px;

width: 50px;

height: 50px;

background: rgb(174, 246, 141);

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

}

.eye-left-pupil {

position: relative;

top: -68px;

left: 196px;

width: 23px;

height: 49px;

background: rgba(10, 28, 2, .8);

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

z-index: 1;

}

.eye-right {

position: relative;

top: -117px;

left: 313px;

width: 50px;

height: 50px;

background: rgb(174, 246, 141);

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

}

.eye-right-pupil {

position: relative;

top: -166px;

left: 326px;

width: 23px;

height: 49px;

background: rgba(10, 28, 2, .8);

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

z-index: 1;

}

.nose {

font-family: Nunito, sans-serif;

font-weight: 400;

font-size: 2em;

color: rgba(10, 28, 2, .8);

position: relative;

top: -200px;

left: 265px;

animation: nosetwitch .1s ease-in-out 0s infinite alternate

}

.tail {

position: relative;

top: 800px;

left: 333px;

width: 35px;

height: 100px;

background: rgb(241, 233, 233);

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

z-index: -2;

}

.foot-left {

position: relative;

top: -225px;

left: 323px;

width: 25px;

height: 100px;

background: white;

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

z-index: -2;

}

.foot-right {

position: relative;

top: -405px;

left: 197px;

width: 25px;

height: 100px;

background: white;

-moz-border-radius: 150px;

-webkit-border-radius: 150px;

border-radius: 150px;

z-index: -2;

}

#ledge {

background-color: #fff;

width: 100%;

height: 200px;

}

.square-body {

z-index: -2;

width: 110px;

height: 100px;

background: white;

position: relative;

top: -135px;

left: 220px;

}