css3头像,CSS3基础知识 - 绘制头像

CSS

语言：

CSSSCSS

确定

html {

font-size: 10px;

box-sizing: border-box;

position: relative;

}

*,

*:before,

*:after {

position: relative;

box-sizing: inherit;

}

html,

body {

height: 100%;

width: 100%;

background-color: ghostwhite;

}

body {

font-size: 1.618rem;

}

.skull {

position: absolute;

top: 50%;

left: 0;

right: 0;

transform: translateY(-50%);

width: 25rem;

height: 25rem;

margin: 0 auto;

overflow: hidden;

border-radius: 50%;

background-color: #e74c3c;

box-shadow: 0 0.5rem 0 0.25rem rgba(0, 0, 0, 0.15);

}

.skull:before {

content: "";

position: absolute;

display: block;

right: 0;

width: 50%;

height: 100%;

background-color: rgba(0, 0, 0, 0.15);

z-index: 10;

}

.skull .eyes {

position: absolute;

top: 38%;

transform: translateY(-38%);

left: 0;

right: 0;

}

.skull .eye {

position: absolute;

width: 3.75rem;

height: 4.9875rem;

background-color: #2b2b2b;

border-radius: 50%;

}

.skull .eye:first-child {

left: 25%;

transform: translateY(-40%) rotate(15deg);

}

.skull .eye:last-child {

right: 25%;

transform: translateY(-40%) rotate(-15deg);

}

.skull .nose,

.skull .nose:before,

.skull .nose:after {

width: 2rem;

height: 2rem;

position: relative;

background: #2b2b2b;

border-top-right-radius: 60%;

}

.skull .nose:before,

.skull .nose:after {

content: '';

position: absolute;

}

.skull .nose {

position: absolute;

left: 0;

right: 0;

bottom: 9rem;

margin: 0 auto;

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

}

.skull .nose:before {

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

}

.skull .nose:after {

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

}

.skull .teeth {

position: absolute;

width: 100%;

height: 6rem;

bottom: 0rem;

box-shadow: inset 0 0 0 7rem rgba(0, 0, 0, 0.15);

background-color: #2b2b2b;

}

.skull .teeth .top,

.skull .teeth .bottom {

width: 50%;

height: 3rem;

margin: 0 auto;

}

.skull .teeth .top .tooth {

border-radius: 50%;

}

.skull .teeth .bottom {

top: 1rem;

}

.skull .teeth .bottom .tooth {

border-radius: 50%;

}

.skull .teeth .tooth {

width: 25%;

height: 100%;

display: inline-block;

background-color: #e74c3c;

}