Web基础篇
HTML-05哆啦A梦
此页面主要知识点:
一、阴影: box-shadow:水平距离(必须) 垂直距离(必须) 模糊距离(可选) 阴影尺寸(可选) 阴影颜色(可选) inset(outset默认值)可选,内阴影或外阴影;
设置多个阴影:用逗号隔开;
二、径向渐变: background:radial-gradient()
径向渐变
circle 圆
ellipse 椭圆
closest-side 最近的边
farthest-side 最远的边
closest-corner 最近的角
farthest-corner 最远的角
CSS样式:
.head{
width:224px;
height:200px;
margin:100px auto 0 auto;
/* background-color:#12a4d3; */
/* background:linear-gradient(-135deg,#ffffff,#12a4d3 25%); */
background:radial-gradient(closest-side at 88% 12%,#fff,#12a4d3);
border:2px solid #365162;
border-radius:50%;
position:relative;
box-shadow:-5px 5px 10px #9ba09c;
}
.face{
width:185px;
height:135px;
border:2px solid black;
background-color:white;
border-radius:50%;
position:absolute;
margin:auto;
left:0;
right:0;
top:50px;
z-index:2;
}
.eye{
width:50px;
height:58px;
border:2px solid black;
background-color:white;
border-radius:23px;
position:absolute;
top:-30px;
z-index:2;
}
.eyeLeft{
left:40px;
}
.eyeRight{
right:40px;
}
.eyeDot{
width:10px;
height:10px;
background-color:black;
border-radius:50%;
position:absolute;
top:28px;
}
.eyeDotLeft{
right:6px;
}
.eyeDotRight{
left:6px;
}
.nose{
width:20px;
height:20px;
border:1px solid black;
background-color:#c13905;
border-radius:8px;
position:absolute;
margin:auto;
left:0;
right:0;
top:22px;
z-index:1;
}
.noseShadow{
width:0;
height:0;
box-shadow:0 0 3px 3px white;
position:absolute;
right:5px;
top:8px;
}
.nostrils{
width:2px;
height:68px;
background-color:black;
position:absolute;
margin:auto;
left:0;
right:0;
top:44px;
z-index:1;
}
.mouth{
width:130px;
height:100px;
border-bottom:2px solid black;
border-radius:50%;
position:absolute;
margin:auto;
left:0;
right:0;
top:12px;
}
.mouthSquare{
width:130px;
height:50px;
background-color:white;
position: absolute;
margin:auto;
left:0;
right:0;
top:40px;
}
.beard{
width:160px;
height:2px;
background-color:black;
position:absolute;
margin:auto;
left:0;
right:0;
top:66px;
}
.beard02{
transform:rotate(15deg);
}
.beard03{
transform:rotate(-15deg);
}
.beardSquare{
width:76px;
height:25px;
background-color:#ffffff;
position:absolute;
margin:auto;
left:0;
right:0;
top:54px;
}
/* 身体 */
.body{
width:154px;
height:120px;
background-color:#02a8d8;
margin:0 auto;
position:relative;
top:-15px;
}
.belly{
width:118px;
height:118px;
border:2px solid black;
border-radius:50%;
background-color:white;
position:absolute;
top:-20px;
left:17px;
}
.pocket{
width:90px;
height:45px;
border:2px solid black;
border-radius:0 0 45px 45px;
position:absolute;
bottom:12px;
left:12px;
}
.tie{
width:160px;
height:14px;
border:1px solid black;
background-color:#a51f02;
border-radius:5px;
position:absolute;
top:-10px;
left:-4px;
z-index:3;
}
.bell{
width:30px;
height:30px;
background-color:#d1c710;
border:1px solid black;
border-radius:50%;
position: absolute;
margin:auto;
left:0;
right:0;
top:3px;
}
.bellLine{
width:28px;
height:2px;
background-color:black;
position: absolute;
margin:auto;
left:0;
right:0;
top:6px;
}
.bellLine02{
width:30px;
top:10px;
}
.bellDot{
width:10px;
height: 10px;
background-color:black;
border-radius:50%;
position: absolute;
margin:auto;
left:0;
right:0;
bottom:6px;
}
.bellLine03{
width:2px;
height:6px;
top:24px;
}
.bellSquare{
width:0;
height:0;
box-shadow:0 0 5px 5px white;
position: absolute;
right:8px;
top:8px;
}
.arm{
width:30px;
height:70px;
background-color:#02a8d8;
border:1px solid black;
position: absolute;
top:0;
z-index:-1;
}
.armLeft{
left:0;
transform-origin:left top;
transform:rotate(45deg);
}
.armRight{
right:0;
transform-origin:right top;
transform:rotate(-45deg);
}
.hand{
width:43px;
height:43px;
background-color:white;
border:1px solid black;
border-radius:45%;
position:absolute;
left:-7px;
bottom:-23px;
transform:rotate(45deg);
}
.foot{
width:87px;
height:22px;
background-color:white;
border:2px solid black;
border-radius:22px 15px 15px 10px;
position:absolute;
bottom:-18px;
}
.footLeft{
left:-18px;
}
.footRight{
right:-18px;
}
.circle{
width:14px;
height:7px;
border:2px solid black;
border-bottom:none;
border-radius:14px 14px 0 0;
background-color:white;
position: absolute;
margin:auto;
left:0;
right:0;
bottom:0;
}
.bodyLeft{
width: 1px;
height: 90px;
background-color: black;
position: absolute;
top: 24px;
left: 0px;
}
.bodyRight{
width: 1px;
height: 90px;
background-color: black;
position: absolute;
top: 24px;
left: 153px;
}
HTML部分:
<body>
<div class="head">
<div class="face">
<div class="eye eyeLeft">
<div class="eyeDot eyeDotLeft"></div>
</div>
<div class="eye eyeRight">
<div class="eyeDot eyeDotRight"></div>
</div>
<div class="nose">
<div class="noseShadow"></div>
</div>
<div class="nostrils"></div>
<div class="mouth"></div>
<div class="mouthSquare"></div>
<div class="beard"></div>
<div class="beard beard02"></div>
<div class="beard beard03"></div>
<div class="beardSquare"></div>
</div>
</div>
<div class="body">
<div class="belly">
<div class="pocket"></div>
</div>
<div class="tie">
<div class="bell">
<div class="bellLine"></div>
<div class="bellLine bellLine02"></div>
<div class="bellLine bellLine03"></div>
<div class="bellDot"></div>
<div class="bellSquare"></div>
</div>
</div>
<div class="arm armLeft">
<div class="hand"></div>
</div>
<div class="arm armRight">
<div class="hand"></div>
</div>
<div class="circle"></div>
<div class="foot footLeft"></div>
<div class="foot footRight"></div>
<div class="bodyLeft"></div>
<div class="bodyRight"></div>
</div>
</body>
更多推荐
哆啦A梦纯HTML代码
发布评论