最近学习完css3画图，然后就百度找了看有没有好的练手机会，看到别人博客上面有画哆啦A梦，还有小黄人，就自己看了哆啦A梦的来巩固下Css3的知识，先看看效果图
我们把这个图拆分开来，分为上下两部分，上面是头部和身体，头部主要难画的是胡须，胡须的画法是通过画椭圆，然后用border-bottom:1px solid #000,椭圆的背景颜色设置为透明background:transparent，然后通过定位旋转完成，还有一个比较不好做的就是鞋子是用渐变做出有点3D的效果，其实做这种不然，就是需要耐心，大家也去动手做下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>哆啦A梦</title>
</head>
<body>
<div class="robot">
<div class="head">
<div class="face">
<!--眼睛-->
<div class="yes">
<div class="robot-res">
<div class="linear"></div>
<div class="left-yes"></div>
</div>
<div class="robot-res">
<div class="linear"></div>
<div class="right-yes"></div>
</div>
</div>
<!--鼻子-->
<div class="nose"></div>
<!--嘴巴-->
<div class="mouth">
<div></div>
<div></div>
</div>
<!--胡须-->
<div class="beard-left"></div>
<div class="beard-right"></div>
</div>
</div>
<div class="neck"></div>
<div class="bell">
<div class="line"></div>
</div>
<div class="body">
<div class="pocket-bg"></div>
<div class="hand">
<div class="left-hand"></div>
<div class="right-hand"></div>
</div>
<div class="foot">
<div class="left-foot"></div>
<div class="right-foot"></div>
</div>
</div>
</div>
</body>
<style>
body{
margin: 0;
padding: 0;
background: #fff;
width:100%;
}
.robot{
position: relative;
}
.head{
width:400px;
margin: 10px auto;
margin-bottom: 0;
height:350px;
/*background-color:#53a8d9;*/
background-image:radial-gradient(ellipse at top right,#73c1ef,#53a8d9);
border-radius:50% 50% 25% 25% / 55% 55% 45% 45%;
position:relative;
z-index: 4;
}
.face{
width:310px;
height:260px;
background-color:white;
border-radius:50% 50% 25% 25% / 55% 55% 45% 45%;
position:absolute;
bottom: 0;
left:45px;
z-index: 4;
cursor:pointer;
}
.yes{
display: flex;
flex-direction: row;
position: absolute;
left: 70px;
top:-40px;
z-index: 10;
}
.robot-res{
width:80px;
height:100px;
border-radius: 50%;
background: #fff;
border:2px solid #000;
z-index: 5;
position: relative;
}
.robot-res .linear{
width:100%;
height:2px;
background: #000;
position: absolute;
top:45px;
display: none;
transition: all 1s;
}
.left-yes{
width:20px;
height:25px;
border-radius: 50%;
background: #000;
position: absolute;
right:0px;
top:45px;
border:2px solid #000;
z-index: 5;
}
.left-yes:before{
content: '';
width:10px;
height:10px;
border-radius: 50%;
background: #fff;
position: absolute;
right:0px;
top:7px;
z-index: 15;
}
.right-yes{
width:20px;
height:25px;
border-radius: 50%;
background: #000;
position: absolute;
left:0px;
top:45px;
border:2px solid #000;
z-index: 5;
transition: all 1s;
}
.right-yes:before{
content: '';
width:10px;
height:10px;
border-radius: 50%;
background: #fff;
position: absolute;
right:0px;
top:7px;
z-index: 15;
}
.nose{
width:30px;
height: 30px;
background:#c70000;
border-radius: 50%;
position: absolute;
top:40px;
left:50%;
margin-left:-15px;
z-index: 5;
}
.nose:before{
content: '';
width:10px;
height:10px;
border-radius: 50%;
background: #fff;
position: absolute;
right:0px;
top:10px;
z-index: 15;
}
.mouth{
width:250px;
height:200px;
background:snow;
border-radius: 50%;
border-bottom: 2px #000 solid;
position: absolute;
left:50%;
margin-left:-125px;
top:30px;
z-index: 4;
}
.mouth:before{
content: '';
height:140px;
width:2px;
margin-left:-1px;
background:#000;
position:absolute;
left:50%;
top:20px;
}
.face:hover .mouth{
position: absolute;
left:50%;
margin-left:-90px;
width: 180px;
height: 200px;
border-radius: 0;
z-index: 2;
}
.face:hover .right-yes{
left:57px;
}
.face:hover .linear{
display: block;
}
.beard-left{
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:70px;
left:-20px;
transform: rotate(190deg);
}
.beard-left:before{
content: '';
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:-30px;
left:-5px;
transform: rotate(-5deg);
}
.beard-left:after{
content: '';
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:-60px;
left:-5px;
transform: rotate(-10deg);
}
.beard-right{
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:70px;
left:200px;
transform: rotate(170deg);
}
.beard-right:before{
content: '';
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:-30px;
left:5px;
transform: rotate(5deg);
}
.beard-right:after{
content: '';
width:130px;
height:40px;
border-radius: 50%;
background:transparent;
z-index: 999;
border-bottom:2px solid #000;
position: absolute;
top:-60px;
left:5px;
transform: rotate(10deg);
}
.neck{
width:330px;
height:200px;
background: #e30000;
border-radius: 50% 50% 20% 20%/50% 50% 50% 50%;
position: absolute;
left:50%;
margin-left:-165px;
bottom:-22px;
z-index: 2;
}
.neck:before{
content: '';
width:60px;
height:4px;
background: snow;
border-radius: 10px;
position: absolute;
left:60px;
bottom: 16px;
z-index: 4;
}
.bell{
width:40px;
height:40px;
background: #ffdd2e;
border-radius: 50%;
position: absolute;
left:50%;
margin-left:-22px;
bottom:-43px;
border:2px solid #000;
transition: all 1s ease-in-out;
z-index: 2;
}
.bell:before{
content: '';
width:42px;
height:5px;
background: #ffdd2e;
border-radius: 10px;
position: absolute;
left:50%;
margin-left:-23px;
top:12px;
z-index: 5;
border:2px solid #000;
}
.bell:after{
content: '';
width:10px;
height:10px;
background: #6c5844;
border-radius: 50%;
position: absolute;
left:50%;
margin-left:-6px;
bottom:5px;
border:1px solid #000;
}
.bell:hover{
transform: scale(1.5);
bottom:-55px;
}
.line{
width:2px;
height:5px;
background: #000;
position: absolute;
left:50%;
margin-left:-1px;
bottom:0;
}
.body{
width:280px;
height:220px;
background: #53a8d9;
position: absolute;
left:50%;
margin-left:-140px;
border:1px solid #000;
}
.pocket-bg{
width:200px;
height:200px;
background:#fff;
border-radius:50%;
position: absolute;
left: 50%;
top:-20px;
margin-left: -100px;
border: 1px solid #000;
}
.pocket-bg:before{
content: "";
width:150px;
height:75px;
border-radius: 0 0 75px 75px;
border:1px solid #000;
position: absolute;
top: 100px;
left: 50%;
margin-left:-76px;
}
.left-hand{
width:110px;
height:50px;
background: #53a8d9;
position: absolute;
top:13px;
left: -80px;
border:1px solid #000;
border-right: 0;
border-bottom:0;
transform: rotate(-38deg);
z-index: 1;
}
.left-hand:before{
content: '';
width:65px;
height:65px;
background-color: #fff;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
left: -25px;
top:-9px
}
.left-hand:after{
content: '';
width:40px;
height:1px;
background-color: #000;
position: absolute;
left: 27px;
bottom:0px
}
.right-hand{
width:110px;
height:50px;
background: #53a8d9;
position: absolute;
top:13px;
right: -75px;
border:1px solid #000;
border-left: 0;
border-bottom:0;
transform: rotate(38deg);
z-index: 1;
}
.right-hand:before{
content: '';
width:65px;
height:65px;
background-color: #fff;
border: 1px solid #000;
border-radius: 50%;
position: absolute;
right: -35px;
top:-8px
}
.right-hand:after{
content: '';
width:40px;
height:1px;
background-color: #000;
position: absolute;
right: 20px;
bottom:0px
}
.left-foot{
width:145px;
height:30px;
background:#fff;
background: -webkit-gradient(linear, right top, left bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
border:1px solid #000;
position: absolute;
bottom: -30px;
left:-20px;
border-radius: 80px 60px 60px 40px;
box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
}
.right-foot{
width:145px;
height:30px;
background:#fff;
background: -webkit-gradient(linear, left top, right bottom, from(#fff),color-stop(0.75,#fff),color-stop(0.85,#eee), to(#999));
border:1px solid #000;
position: absolute;
bottom: -30px;
right:-22px;
/*transform: rotate(-180deg);*/
border-radius: 60px 80px 40px 60px;
box-shadow: -6px 0 10px rgba(0, 0, 0, 0.35);
}
.body:before{
content: '';
width:40px;
height:20px;
background: #fff;
position: absolute;
border: 1px solid #000;
border-bottom: 0;
border-radius: 20px 20px 0 0;
bottom:-1px;
left: 50%;
margin-left: -20px;
}
</style>
</html>
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
