css钢铁侠视角,CSS3 Iron Man 钢铁侠肖像

CSS

语言：

CSSSCSS

确定

* {

margin: auto;

padding: 0;

-webkit-box-sizing: border-box;

}

body {

background: #dedede;

}

.ironman {

width: 150px;

height: 200px;

position: relative;

margin: 50px auto;

}

.head {

width: 100%;

height: 100px;

}

.helmet {

width: 105px;

height: 115px;

border: solid 8px rgba(0, 0, 0, 0.5);

border-radius: 45px;

position: relative;

background: #c70305;

z-index: 3;

}

.helmet-inside-fix-left {

z-index: 3;

position: absolute;

left: 23px;

top: 3px;

width: 15px;

height: 3px;

background: #630102;

transform: rotate(65deg);

-webkit-transform: rotate(65deg);

}

.helmet-inside-fix-right {

z-index: 3;

position: absolute;

right: 23.5px;

top: 3px;

width: 15px;

height: 3px;

background: #630102;

transform: rotate(-65deg);

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

}

.helmet-inside-fix {

z-index: 3;

top: 8px;

left: 3px;

width: 83px;

height: 88px;

border-radius: 30px;

position: absolute;

overflow: hidden;

}

.helmet-inside {

top: 8px;

left: 3px;

width: 83px;

height: 88px;

background: #fedb10;

border: solid 3px #630102;

border-radius: 30px;

position: absolute;

overflow: hidden;

}

.helmet-inside-top {

position: absolute;

z-index: 3;

top: -15px;

left: 30%;

width: 40%;

height: 30%;

background: #c70305;

border: solid 3px #630102;

transform: rotate(180deg);

-webkit-transform: rotate(180deg);

-webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);

}

.helmet-inside-right {

position: absolute;

z-index: 3;

bottom: -10px;

right: -15px;

width: 35px;

height: 40px;

border-radius: 40px;

border: solid 3px #630102;

background: #c70305;

}

.helmet-inside-left {

position: absolute;

z-index: 3;

bottom: -10px;

left: -15px;

width: 35px;

height: 40px;

border-radius: 40px;

background: #c70305;

border: solid 3px #630102;

}

.eye-left {

position: absolute;

left: 11px;

top: 30px;

background: #fff;

width: 20px;

height: 7px;

border: solid 2.95px #000;

transform: rotate(5deg);

-webkit-transform: rotate(5deg);

}

.eye-right {

position: absolute;

right: 11px;

top: 30px;

background: #fff;

width: 20px;

height: 7px;

border: solid 2.95px #000;

transform: rotate(-5deg);

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

}

.mouth {

position: absolute;

bottom: 15px;

left: calc(50% - 12px);

width: 25px;

height: 4px;

background: #000;

}

.mouth:before {

content: "";

position: absolute;

width: 17px;

height: 4px;

right: -15px;

top: 3.5px;

background: #000;

transform: rotate(25deg);

-webkit-transform: rotate(25deg);

}

.mouth:after {

content: "";

position: absolute;

width: 17px;

height: 4px;

left: -15px;

top: 3.5px;

background: #000;

transform: rotate(-25deg);

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

}

.body {

width: 80px;

height: 90px;

border-radius: 30px;

background: #c70305;

border: solid 8px rgba(0, 0, 0, 0.5);

position: relative;

margin-top: -14px;

}

.heart {

position: absolute;

width: 25px;

height: 25px;

border-radius: 25px;

left: calc(50% - 12px);

top: 25px;

background: #fff;

border: solid 5px #630102;

}

.arm-left {

z-index: -2;

position: absolute;

width: 50px;

height: 18px;

top: 8px;

left: -25px;

border-radius: 12px 0 0 0;

border: solid 5px rgba(0, 0, 0, 0.5);

background: #c70305;

}

.arm-left:before {

content: "";

z-index: -1;

position: absolute;

border: solid 5px #630102;

background: #fedb10;

width: 18px;

height: 23px;

border-top: 0;

top: 13px;

left: 0px;

border-radius: 0 0 10px 10px;

}

.arm-left:after {

content: "";

position: absolute;

left: -3px;

border: solid 5px rgba(0, 0, 0, 0.6);

bottom: -45px;

width: 13px;

height: 13px;

background: #c70305;

border-radius: 20px;

}

.arm-right {

z-index: -2;

position: absolute;

width: 50px;

height: 18px;

top: 8px;

right: -25px;

border-radius: 0 12px 0 0;

border: solid 5px rgba(0, 0, 0, 0.5);

background: #c70305;

}

.arm-right:before {

content: "";

z-index: -1;

position: absolute;

border: solid 5px #630102;

background: #fedb10;

width: 18px;

height: 23px;

border-top: 0;

top: 13px;

right: 0px;

border-radius: 0 0 10px 10px;

}

.arm-right:after {

content: "";

position: absolute;

right: -3px;

border: solid 5px rgba(0, 0, 0, 0.6);

bottom: -45px;

width: 13px;

height: 13px;

background: #c70305;

border-radius: 20px;

}

.leg-left {

position: absolute;

height: 40px;

width: 27px;

background: #c70305;

border: solid 5px rgba(0, 0, 0, 0.6);

bottom: -33px;

left: 7px;

z-index: -1;

border-radius: 0 0 0 30px;

}

.leg-right {

position: absolute;

height: 40px;

width: 27px;

background: #c70305;

border: solid 5px rgba(0, 0, 0, 0.6);

bottom: -33px;

right: 7px;

z-index: -1;

border-radius: 0 0 30px 0;

}