css3 3d头像,CSS3 外星人公主自适应头像

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

width: 100%;

padding: 0;

margin: 0;

}

body {

background-color: #8186fe;

overflow: hidden;

}

.spaceprincess {

width: 100%;

height: 100%;

position: relative;

overflow: hidden;

}

.lump-head,

.lump-face {

position: absolute;

left: 20%;

top: 0;

margin-top: -4%;

width: 60%;

height: 0;

padding-bottom: 60%;

background-color: #dd81fe;

border: 0.5vw solid #000;

border-radius: 50%;

}

.lump-face {

top: 0.5vw;

border: 0;

z-index: 1;

margin-left: 0.5vw;

}

.lump-cheek-l {

position: absolute;

left: 0;

margin-top: 25%;

margin-left: -0.5vw;

width: 40%;

height: 0;

padding-bottom: 40%;

background-color: #dd81fe;

border: 0.5vw solid #000;

border-radius: 50%;

}

.lump-cheek-r {

position: absolute;

right: 0;

margin-top: 25%;

margin-right: -0.5vw;

width: 40%;

height: 0;

padding-bottom: 40%;

background-color: #dd81fe;

border: 0.5vw solid #000;

border-radius: 50%;

}

.lump-body {

position: absolute;

right: 0;

margin-top: 45%;

height: 100%;

width: 100%;

background-color: #dd81fe;

}

.lump-star {

position: absolute;

display: block;

top: 0;

margin-top: 8%;

left: 41%;

z-index: 2;

width: 0px;

height: 0px;

border-width: 7.5vw 10vw 0 10vw;

border-style: solid;

border-color: #fef72d transparent transparent transparent;

}

.lump-star:before,

.lump-star:after {

content: '';

display: block;

position: absolute;

top: -13vw;

left: -3.7vw;

width: 0;

height: 0;

border-width: 10vw 0 10vw 7.5vw;

border-style: solid;

border-color: transparent transparent transparent #fef72d;

-webkit-transform: rotate(20.5deg);

-moz-transform: rotate(20.5deg);

transform: rotate(20.5deg);

}

.lump-star:after {

border-width: 10vw 7.5vw 10vw 0;

border-style: solid;

border-color: transparent #fef72d transparent transparent;

-webkit-transform: rotate(-20.5deg);

-moz-transform: rotate(-20.5deg);

transform: rotate(-20.5deg);

}

.lump-eye-l,

.lump-eye-r {

position: absolute;

z-index: 1;

background-color: #000;

border-radius: 50%;

margin-top: 34%;

left: 22%;

width: 14%;

padding-bottom: 14%;

}

.lump-eye-r {

left: auto;

right: 22%;

}

.lump-eye-l:before,

.lump-eye-r:before {

content: '';

background-color: #fff;

width: 40%;

height: 40%;

position: absolute;

border-radius: 50% 40%;

left: 16%;

top: 14%;

-webkit-animation: shake 0.2s infinite;

-moz-animation: shake 0.2s infinite;

animation: shake 0.2s infinite;

}

.lump-eye-l:after,

.lump-eye-r:after {

content: '';

background-color: #fff;

width: 30%;

height: 20%;

position: absolute;

border-radius: 50% 40%;

right: 25%;

bottom: 14%;

-webkit-animation: shake 0.2s infinite;

-moz-animation: shake 0.2s infinite;

animation: shake 0.2s infinite;

-webkit-animation-delay: 0.1;

-moz-animation-delay: 0.1;

animation-delay: 0.1;

/* Brow */

}

.lump-brow-l {

position: absolute;

z-index: 1;

height: 27%;

width: 75%;

border-width: 0 0.4vw 0.4vw 0;

border-radius: 0 0 80% 0;

border-style: solid;

top: -27%;

left: 12%;

}

.lump-brow-l:before {

content: '';

position: absolute;

width: 100%;

height: 50%;

padding-right: 0.4vw;

background-color: #dd81fe;

}

.lump-brow-r {

position: absolute;

z-index: 1;

height: 27%;

width: 75%;

border-width: 0 0 0.4vw 0.4vw;

border-radius: 0 0 0 80%;

border-style: solid;

top: -27%;

right: 12%;

}

.lump-brow-r:before {

content: '';

position: absolute;

width: 100%;

height: 50%;

margin-left: -0.4vw;

padding-left: 0.4vw;

background-color: #dd81fe;

/* Month */

}

.lump-mouth {

position: absolute;

z-index: 1;

margin-top: 43%;

left: 40%;

width: 20%;

height: 0;

padding-bottom: 15%;

border-radius: 50%;

margin-left: -0.4vw;

border: 0.4vw solid #000;

background-color: #3a2657;

overflow: hidden;

}

.lip-bottom {

position: absolute;

z-index: 1;

margin-top: 50%;

left: 40%;

width: 20%;

height: 0;

padding-bottom: 15%;

margin-left: -0.4vw;

border-radius: 50%;

border: 0.4vw solid #000;

background-color: #dd81fe;

-webkit-animation: shake2 0.5s infinite;

-moz-animation: shake2 0.5s infinite;

animation: shake2 0.5s infinite;

}

.lip-bottom:after {

content: '';

position: absolute;

top: 27%;

margin-left: -0.4vw;

padding: 0 0.4vw;

width: 100%;

height: 100%;

background-color: #dd81fe;

}

.tongue {

content: '';

position: absolute;

bottom: 22%;

left: 8%;

width: 60%;

height: 45%;

border-radius: 55% 45% 0% 40%;

background-color: #ab90df;

border: 0.3vw solid #000;

}

.tooth-1 {

content: '';

position: absolute;

top: 0;

left: 25%;

height: 18%;

width: 14%;

border-radius: 0 0 60% 30%;

background-color: #fff;

-webkit-transform: rotate(-12deg);

-moz-transform: rotate(-12deg);

transform: rotate(-12deg);

border: 0.3vw solid #000;

}

.tooth-2 {

content: '';

position: absolute;

top: -17%;

left: 43%;

height: 33%;

width: 17%;

border-radius: 0 0 60% 60%;

background-color: #fff;

border: 0.3vw solid #000;

}

.tooth-3 {

content: '';

position: absolute;

top: -10%;

left: 64%;

height: 28%;

width: 16%;

border-radius: 0 0 45% 55%;

background-color: #fff;

-webkit-transform: rotate(15deg);

-moz-transform: rotate(15deg);

transform: rotate(15deg);

border: 0.3vw solid #000;

}

@-webkit-keyframes shake {

0% {

-webkit-transform: translate(0, 0);

}

25% {

-webkit-transform: translate(3%, 0);

}

50% {

-webkit-transform: translate(0, 1%);

}

75% {

-webkit-transform: translate(-2%, 0);

}

100% {

-webkit-transform: translate(0, 0);

}

}

@-webkit-keyframes shake2 {

0% {

-webkit-transform: translate(0, 2%);

}

25% {

-webkit-transform: translate(0, 0);

}

50% {

-webkit-transform: translate(0, 1%);

}

75% {

-webkit-transform: translate(0, 0);

}

100% {

-webkit-transform: translate(0, 0);

}

}

@-moz-keyframes shake {

0% {

-moz-transform: translate(0, 0);

}

25% {

-moz-transform: translate(3%, 0);

}

50% {

-moz-transform: translate(0, 1%);

}

75% {

-moz-transform: translate(-2%, 0);

}

100% {

-moz-transform: translate(0, 0);

}

}

@-moz-keyframes shake2 {

0% {

-moz-transform: translate(0, 2%);

}

25% {

-moz-transform: translate(0, 0);

}

50% {

-moz-transform: translate(0, 1%);

}

75% {

-moz-transform: translate(0, 0);

}

100% {

-moz-transform: translate(0, 0);

}

}

@keyframes shake {

0% {

transform: translate(0, 0);

}

25% {

transform: translate(3%, 0);

}

50% {

transform: translate(0, 1%);

}

75% {

transform: translate(-2%, 0);

}

100% {

transform: translate(0, 0);

}

}

@keyframes shake2 {

0% {

transform: translate(0, 2%);

}

25% {

transform: translate(0, 0);

}

50% {

transform: translate(0, 1%);

}

75% {

transform: translate(0, 0);

}

100% {

transform: translate(0, 0);

}

}