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;
}