!DOCTYPEhtml
html
head
metacharset="utf-8"
title冰墩墩/title
style
*{
margin:0;
padding:0;
}
.box{
position:absolute;
top:50%;
left:50%;
height:50%;
width:px;
height:px;
transform:translate(-50%,-50%);
background-color:#ffffff;
}
.b_body{
position:relative;
width:px;
height:px;
border:8pxsolid#;
border-radius:88%88%62%68%/82%82%95%84%;
margin:50pxauto;
background-color:#FFFFFF;
}
.ear_1,.ear_2{
width:60px;
height:80px;
background-color:#;
border-radius:50%;
}
.ear_1{
position:absolute;
top:11%;
left:27%;
z-index:-1;
}.ear_2{
position:absolute;
top:11%;
right:27%;
z-index:-1;
}
.eye_1,.eye_2{
width:80px;
height:px;
background-color:#;
border-radius:50%;
}
.eye_1{
position:absolute;
top:30%;
left:32%;
transform:rotate(45deg);
}
.eye_1::after{
content:"";
position:absolute;
top:19%;
left:25%;
width:40px;
height:40px;
border:4pxsolid#FFF;
border-radius:50%;
}
.eye_1::before{
content:"";
position:absolute;
top:28%;
left:49%;
width:12px;
height:12px;
border-radius:50%;
background-color:#B0B0B0;
}
.eye_2{
position:absolute;
top:30%;
right:32%;
transform:rotate(-45deg);
}
.eye_2::after{
content:"";
position:absolute;
top:19%;
right:25%;
width:40px;
height:40px;
border:4pxsolid#FFF;
border-radius:50%;
}
.eye_2::before{
content:"";
position:absolute;
top:28%;
right:49%;
width:12px;
height:12px;
border-radius:50%;
background-color:#B0B0B0;
}
.nose{
position:absolute;
top:47%;
left:48%;
width:28px;
height:18px;
border-radius:88%88%62%68%/82%82%95%84%;
background-color:#;
transform:rotate(-deg);
}
.mouse_1{
position:absolute;
top:52%;
left:44%;
width:70px;
height:30px;
background-color:#;
border-radius:50%;
}.mouse_2{
position:absolute;
top:51%;
left:44%;
width:70px;
height:29px;
background-color:#FFF;
border-radius:40%;
}
.circle_blue{
position:absolute;
top:22.1%;
left:25.3%;
border:3pxsolid#89d2ee;
width:px;
height:px;
border-radius:88%88%79%79%/90%90%79%79%;
}
.circle_red{
position:absolute;
top:21.6%;
left:24.7%;
border:3pxsolid#b;
width:px;
height:px;
border-radius:88%88%79%79%/90%90%79%79%;
}
.circle_purple{
position:absolute;
top:21.3%;
left:24.3%;
border:3pxsolidpurple;
width:px;
height:px;
border-radius:88%88%79%79%/90%90%79%79%;
}
.circle_yellow{
position:absolute;
top:21%;
left:23.8%;
border:3pxsolid#e3e;
width:px;
height:px;
border-radius:88%88%79%79%/90%90%79%79%;
}
.circle_green{
position:absolute;
top:20.6%;
left:23.3%;
border:3pxsolid#d00;
width:px;
height:px;
border-radius:88%88%79%79%/90%90%79%79%;
}
.logo{
position:absolute;
top:73%;
left:40%;
width:px;
height:80px;
}
img{
width:px;
height:80px;
}
.arm1{
position:absolute;
top:55%;
left:10%;
width:75px;
height:px;
background-color:#;
border-radius:24%69%68%76%/53%95%40%52%;
transform:rotate(45deg);
z-index:-1;
}
.arm2{
position:absolute;
top:46%;
right:9%;
width:75px;
height:px;
background-color:#;
border-radius:24%69%68%76%/53%95%40%52%;
transform:rotate(-deg);
z-index:-1;
}
.leg1{
position:absolute;
top:91%;
left:32%;
width:83px;
height:80px;
border-radius:px30px;
background-color:#;
z-index:-1;
}
.leg2{
position:absolute;
top:91%;
right:32%;
width:83px;
height:80px;
border-radius:px30px;
background-color:#;
z-index:-1;
}
.love{
position:absolute;
top:10%;
right:10%;
}
.disc1{
position:relative;
width:40px;
height:35px;
}
.disc1:before,
.disc1:after{
position:absolute;
content:"";
left:27px;
top:0;
width:28px;
height:40px;
background:red;
border-radius:50px50px00;
transform:rotate(0deg);
transform-origin:%;
}
.disc1:after{
left:0;
transform:rotate(90deg);
transform-origin:%%;
}
/style
/head
body
divclass="box"
!--形体--
divclass="b_body"/div
!--耳朵--
divclass="ear_1"/div
divclass="ear_2"/div
!--眼睛--
divclass="eye_1"/div
divclass="eye_2"/div
!--冰丝带--
divclass="circle_blue"/div
divclass="circle_red"/div
divclass="circle_purple"/div
divclass="circle_yellow"/div
divclass="circle_green"/div
!--鼻子--
divclass="nose"/div
!--嘴巴--
divclass="mouse_1"/div
divclass="mouse_2"/div
divclass="arm1"/div
divclass="arm2"/div
divclass="logo"
imgsrc="bdd.jpg"alt=""
/div
divclass="leg1"/div
divclass="leg2"/div
divclass="love"
divclass="disc1"/div
/div
/div
/body
/html
预览时标签弗成点收录于合集#个