想要学会CSS的各种属性，只有通过多动手多看一些相关博客来提高自己，没有付出就想着收获是不切实际的。下面是自己用纯CSS写的一个卡通角色人物，当然首次做还有很多不完美的地方，比如说动画。CSS可以实现很多很炫的效果，不如自己去尝试下。看看代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
background: #000000;
}
.wrapper{
width: 150px;
height: 150px;
margin: 200px auto;
background-color: #BBBBBB;
border-radius: 50%;
position: relative;
}
/*耳朵*/
.ear{
position: relative;
}
.ear .ear_right, .ear .ear_left{
width: 70px;
height: 70px;
border-radius: 50%;
background-color: #929292;
position: absolute;
top: -5px;
left: -20px;
z-index: 2;
}
.ear .ear_left{
left: 102px;
top: -4px;
}
.ear .ear_right:after, .ear .ear_left:after{
content: "";
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #F0AD4E;
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
}
.ear .ear_left .ear_l, .ear .ear_right .ear_r{
width: 8px;
height: 8px;
border-radius: 50%;
background-color: rgba(255,255,255,.6);
position: absolute;
top: 31px;
left: 31px;
z-index: 4;
}
/*眼睛*/
.eye{
position: relative;
}
.eye .eye_left, .eye .eye_right{
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #FFFFFF;
position: absolute;
top: 55px;
left: 35px;
z-index: 5;
}
.eye .eye_left{
left: 86px;
}
.eye .eye_left:after, .eye .eye_right:after{
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #000000;
position: absolute;
top: 16px;
left: 7px;
z-index: 6;
-webkit-animation: eye 5s ease-in-out infinite;
-moz-animation: eye 5s ease-in-out infinite;
-ms-animation: eye 5s ease-in-out infinite;
animation: eye 5s ease-in-out infinite;
}
.eye .eye_left:after{
left: 13px;
}
/*嘴巴*/
.mouth{
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 35px solid #929292;
position: absolute;
top: 90px;
left: 55px;
z-index: 7;
}
/*胡须*/
.beard{
position: relative;
}
.beard .beard_one, .beard .beard_one2{
width: 40px;
border-top: 2px solid #000000;
position: absolute;
top: 93px;
left: 26px;
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
-ms-transform: rotate(5deg);
transform: rotate(5deg);
}
.beard .beard_one{
left: 84px;
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}
.beard .beard_three, .beard .beard_three2{
width: 40px;
border-top: 2px solid #000000;
position: absolute;
top: 100px;
left: 26px;
-webkit-transform: rotate(165deg);
-moz-transform: rotate(165deg);
-ms-transform: rotate(165deg);
transform: rotate(165deg);
}
.beard .beard_three{
left: 84px;
-webkit-transform: rotate(-165deg);
-moz-transform: rotate(-165deg);
-ms-transform: rotate(-165deg);
transform: rotate(-165deg);
}
.beard .beard_two, .beard .beard_two2{
width: 30px;
border-top: 2px solid #000000;
position: absolute;
top: 96px;
left: 30px;
}
.beard .beard_two{
left: 90px;
}
/*牙齿*/
.tooth{
position: relative;
}
.tooth .tooth_left, .tooth .tooth_right{
width: 8px;
height: 14px;
background: #FFFFFF;
position: absolute;
top: 126px;
left: 65px;
z-index: 8;
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-ms-transform: rotate(15deg);
transform: rotate(15deg);
}
.tooth .tooth_left{
left: 77px;
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
transform: rotate(-15deg);
}
@-webkit-keyframes eye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translateX(5px);
}
80%,90%{
-webkit-transform: translateX(-5px);
}
}
@keyframes eye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translateX(5px);
}
80%,90%{
-webkit-transform: translateX(-5px);
}
}
</style>
</head>
<body>
<div class="wrapper">
<!--耳朵-->
<div class="ear">
<div class="ear_left">
<div class="ear_l"></div>
</div>
<div class="ear_right">
<div class="ear_r"></div>
</div>
</div>
<!--眼睛-->
<div class="eye">
<div class="eye_left"></div>
<div class="eye_right"></div>
</div>
<div class="mouth"></div>
<!--胡须-->
<div class="beard">
<div class="beard_one"></div>
<div class="beard_one2"></div>
<div class="beard_two"></div>
<div class="beard_two2"></div>
<div class="beard_three"></div>
<div class="beard_three2"></div>
</div>
<!--牙齿-->
<div class="tooth">
<div class="tooth_left"></div>
<div class="tooth_right"></div>
</div>
</div>
</body>
</html>
效果图.gif
网友评论