下图为纯HTML+CSS绘制。
图：
其中云、风车、尾巴是动态的；
以下是代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞翔的哆啦A梦title>
<style>
/* 重置样式引自于阿里巴巴图标库iconfont.css */
*{margin: 0;padding: 0;list-style: none;}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
th, td /* table elements 表格元素 */ {
margin: 0;
padding: 0;
}
body, button, input, select, textarea /* for ie */ {
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
ul, ol { list-style: none; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
legend { color: #000; } /* for ie6 */
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
/* 注：optgroup 无法扶正 */
table { border-collapse: collapse; border-spacing: 0; }
.ks-clear:after, .clear:after {
content: '\20';
display: block;
height: 0;
clear: both;
}
/* 重置样式结束 */
.canvas{
width: 580px;
height: 322px;
margin: 200px auto;
position: relative;
background:linear-gradient(to bottom,#2E8EE5,#60C0F2);
background:-webkit-gradient(linear, 0% 0%, 0% 100%,from(#2E8EE5), to(#60C0F2));
overflow: hidden;
}
.canvas *{
position: absolute;
box-sizing: border-box;
}
.bg{
width: 100%;
height: 100%;
left:0;
top:0;
}
.cloud_group{
width: 200%;
height: 100%;
left:0;
top:0;
}
.cloud_running{
animation: clouding 4s linear infinite;
-moz-animation: clouding 4s linear infinite;
-webkit-animation: clouding 4s linear infinite;
-o-animation: clouding 4s linear infinite;
}
@keyframes clouding {
0%{
left: 0;
}
100%{
left: 580px;
}
}
@-moz-keyframes clouding {
0%{
left: 0;
}
100%{
left: 580px;
}
}
@-webkit-keyframes clouding {
0%{
left: 0;
}
100%{
left: 580px;
}
}
@-o-keyframes clouding {
0%{
left: 0;
}
100%{
left: 580px;
}
}
.cloud_group_1{
width: 50%;
height: 100%;
left:0;
top:0;
}
.cloud_group_2{
width: 50%;
height: 100%;
left:-50%;
top:0;
}
.cloud_1{
top: 16px;
left: 80px;
width: 130px;
height:70px;
}
.list_1{
width: 50px;
height:34px;
left:34px;
top:1px;
background: #f2f2f2;
border-radius: 50%;
}
.list_2{
width: 30px;
height: 30px;
left: 72px;
top: 7px;
background: #f2f2f2;
border-radius: 50%;
}
.list_3{
width: 30px;
height: 30px;
left: 88px;
top: 13px;
background: #f2f2f2;
border-radius: 50%;
}
.list_4{
width: 25px;
height: 16px;
left: 96px;
top: 27px;
background: #f2f2f2;
border-radius: 50%;
}
.list_5{
top: 36px;
left: 65px;
width: 44px;
height: 22px;
border-radius: 50%;
transform: rotate(10deg);
background: #f2f2f2;
z-index: 4;
}
.list_6{
width: 30px;
height: 30px;
left: 48px;
top: 28px;
background: #f2f2f2;
border-radius: 50%;
z-index: 3;
}
.list_7{
width: 44px;
height: 22px;
left: 28px;
top: 32px;
transform: rotate(-8deg);
background: #f2f2f2;
border-radius: 50%;
z-index: 2;
}
.list_8{
width: 40px;
height: 26px;
left: 12px;
top: 14px;
background: #f2f2f2;
border-radius: 50%;
}
.list_9{
width: 20px;
height: 20px;
left: 24px;
top: 6px;
background: #f2f2f2;
border-radius: 50%;
}
.list_4, .list_5, .list_6, .list_7, .list_8{
box-shadow: 0 6px 2px #8DB9DE;
}
.list_8{
box-shadow: -4px 2px 1px #8DB9DE, -4px 6px 1px #8DB9DE;
}
.list_7{
box-shadow: -4px 6px 1px #8DB9DE;
}
.list_5{
box-shadow: 4px 6px 1px #8DB9DE, 4px 2px 1px #8DB9DE;
}
.list_4{
box-shadow: 2px 6px 1px #8DB9DE, 3px 2px 1px #8DB9DE;
}
.list_10{
width: 30px;
height: 30px;
left: 63px;
top: 17px;
background: #f2f2f2;
border-radius: 50%;
}
.cloud_2{
left: 44px;
top: 200px;
}
.cloud_3{
width: 187px;
height: 110px;
top: 117px;
left: 408px;
}
.black_1{
width: 40px;
height: 20px;
left: 0;
top: 76px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_2{
width: 40px;
height: 20px;
left: 20px;
top: 80px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_3{
width: 40px;
height: 20px;
left: 35px;
top: 78px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_4{
width: 40px;
height: 20px;
left: 50px;
top: 76px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_5{
width: 40px;
height: 60px;
top: 46px;
left: 89px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_6{
width: 46px;
height: 20px;
top: 75px;
left: 105px;
transform: rotate(-13deg);
background: #8DB9DE;
border-radius: 50%;
}
.white_1{
width: 40px;
height: 20px;
left: -4px;
top: 70px;
transform: rotate(45deg);
background: #f2f2f2;
border-radius: 50%;
}
.white_2{
width: 50px;
height: 50px;
left: 20px;
top: 44px;
background: #f2f2f2;
border-radius: 50%;
}
.white_3{
width: 50px;
height: 50px;
left: 61px;
top: 44px;
background: #f2f2f2;
border-radius: 50%;
}
.black_7{
width: 40px;
height: 60px;
top: 35px;
left: 108px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
}
.black_8{
width: 24px;
height: 15px;
top: 70px;
left: 135px;
transform: rotate(45deg);
background: #8DB9DE;
border-radius: 50%;
/*box-shadow: 2px 6px 1px #8DB9DE;*/
}
.white_4{
width: 40px;
height: 60px;
top: 35px;
left: 105px;
transform: rotate(45deg);
background: #f2f2f2;
border-radius: 50%;
}
.white_5{
width: 24px;
height: 15px;
top: 70px;
left: 131px;
transform: rotate(45deg);
background: #f2f2f2;
border-radius: 50%;
/*box-shadow: 2px 6px 1px #8DB9DE;*/
}
.white_6{
width: 50px;
height: 50px;
top: 30px;
left: 97px;
background: #f2f2f2;
border-radius: 50%;
}
.white_7{
width: 30px;
height: 50px;
top: 23px;
left: 74px;
transform: rotate(45deg);
background: #f2f2f2;
border-radius: 50%;
}
.white_8{
width: 70px;
height: 50px;
top: 14px;
left: 24px;
transform: rotate(20deg);
background: #f2f2f2;
border-radius: 50%;
}
.white_9{
width: 36px;
height: 36px;
top: 35px;
left: 4px;
transform: rotate(20deg);
background: #f2f2f2;
border-radius: 50%;
}
.fg{
width: 100%;
height: 100%;
top: 0;
left: 0;
}
/*哆啦A梦*/
.a_meng{
width: 226px;
height: 140px;
left: 180px;
top: 100px;
z-index: 2;
}
.head{
width: 125px;
height: 125px;
border-radius: 50%;
background: #0A9CC3;
border: 1px solid #000;
}
.face{
left: 7px;
top: 23px;
width: 117px;
height: 100px;
border-radius: 50%;
border: 1px solid #000;
background: #f2f2f2;
transform: rotate(-21deg);
}
.left_eye{
width:22px;
height:34px;
border-radius: 50%;
background: #f2f2f2;
top: 21px;
left: 16px;
border: 1px solid #000;
z-index: 2;
}
.right_eye{
width:22px;
height:34px;
border-radius: 50%;
background: #f2f2f2;
top: 14px;
left: 35px;
border: 1px solid #000;
transform: rotate(-8deg);
z-index: 2;
}
.left_line_eye{
width: 14px;
height: 14px;
border: 2px solid #000;
left: 8px;
top: 14px;
border-left: none;
border-bottom: none;
border-right: none;
transform: rotate(-30deg);
border-radius: 50%;
z-index: 2;
}
.right_line_eye{
width: 14px;
height: 14px;
border: 2px solid #000;
left: 2px;
top: 14px;
border-left: none;
border-bottom: none;
border-right: none;
transform: rotate(-30deg);
border-radius: 50%;
z-index: 2;
}
.nurse{
width: 16px;
height: 16px;
border: 1px solid #000;
background: radial-gradient(6px 6px at 3px 5px, #f2f2f2 30%, #C43D4B 100%);
border-radius: 50%;
left: 28px;
top: 45px;
z-index: 2;
}
.mouse_box{
width: 100px;
height: 50px;
transform: rotate(-45deg);
left: 26px;
top: 61px;
overflow: hidden;
}
.mouse{
width: 120px;
height: 90px;
border-radius: 50%;
background: linear-gradient(to right, transparent 0%, transparent 60%, #BC3F3D 60%, #BC3F3D 100% );
transform: rotate(90deg);
z-index: 0;
left: -9px;
top: -56px;
border: 1px solid #000;
overflow: hidden;
}
.tongue{
width: 60px;
height: 30px;
border: 1px solid #000;
background: #EE7562;
transform: rotate(90deg);
border-radius: 50%;
right: -18px;
top: 28px;
}
.mouse_up{
width: 110px;
height: 40px;
border-radius: 50%;
transform: rotate(-38deg);
border: 1px solid #000;
left: -2px;
top: 50px;
border-top: none;
background: linear-gradient(to bottom, transparent 0%, transparent 45%, #f2f2f2 45%, #f2f2f2 100% );
}
.mouse_left{
width: 50px;
height: 30px;
background: #f2f2f2;
left: 6px;
top: 75px;
border-radius: 50%;
border: 1px solid #000;
transform: rotate(-23deg);
border-top: none;
border-right: none;
}
.mouse_empty_1{
width: 20px;
height: 10px;
background: #f2f2f2;
transform: rotate(-30deg);
left: 38px;
top: 86px;
border-radius: 50%;
}
.nurse_line{
height: 37px;
width: 5px;
border-radius: 50%;
border: 1px solid #000;
border-right: none;
left: 47px;
top: 56px;
background: #f2f2f2;
transform: rotate(-30deg);
}
.beard_box{
width: 120px;
height: 50px;
transform: rotate(-28deg);
left: -10px;
top: 35px;
}
.beard_1{
width: 29px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(20deg);
left: 6px;
top: 12px;
}
.beard_2{
width: 32px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(0deg);
left: 0;
top: 27px;
}
.beard_3{
width: 29px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(-12deg);
left: 3px;
top: 42px;
}
.beard_4{
width: 38px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(12deg);
right: 3px;
top: 42px;
}
.beard_5{
width: 36px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(-2deg);
right: 3px;
top: 27px;
}
.beard_6{
width: 38px;
height: 5px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(-20deg);
right: 5px;
top: 11px;
}
.body{
width: 76px;
height: 64px;
left: 124px;
top: 44px;
}
.butt{
width: 72px;
height: 60px;
border-radius: 50%;
border: 1px solid #000;
border-bottom: none;
border-left: none;
border-right: none;
background: #0793B7;
}
.butt_1{
width: 20px;
height: 5px;
border-radius: 50%;
border: 1px solid #000;
border-bottom: none;
border-left: none;
border-right: none;
background: #0793B7;
transform: rotate(-26deg);
left: 0;
top: 7px;
}
.butt_2{
height: 42px;
width: 30px;
border-radius: 50%;
background: #0595B8;
transform: rotate(-10deg);
border-right: 1px solid #000;
left: 52px;
top: 15px;
}
.butt_3{
width: 45px;
height: 30px;
border-bottom: 1px solid #000;
border-radius: 50%;
background: #0595B8;
left: 35px;
top: 31px;
box-shadow: inset 0 -2px 2px #333;
}
.butt_4{
width: 41px;
height: 22px;
border-bottom: 1px solid #000;
background: #0595B8;
left: 8px;
top: 37px;
}
.belly{
width: 50px;
height: 16px;
background: #f2f2f2;
transform: rotate(-17deg);
border-radius: 50%;
border: 1px solid #000;
left: -1px;
top: 55px;
overflow: hidden;
}
.belly_vertical_line{
height: 21px;
width: 1px;
border-left: 1px solid #000;
transform: rotate(60deg);
top: 0px;
left: 18px;
}
.belly_circle{
width: 15px;
height: 15px;
border-top: 1px solid #000;
border-radius: 50%;
transform: rotate(60deg);
left: 19px;
top: 5px;
}
.scarf{
height: 48px;
width: 10px;
left: -7px;
top: 5px;
transform: rotate(15deg);
overflow: hidden;
border-radius: 50%;
}
.scarf_red{
height: 42px;
width: 10px;
border: 1px solid #000;
background: linear-gradient(to right, transparent 0%, transparent 25%, #BF4E50 25%, #BF4E50 100%);
border-radius: 50%;
left: 0;
right: 0;
border-left: none;
}
.scarf_cut{
height: 42px;
width: 10px;
border: 1px solid #000;
border-radius: 50%;
left: -6px;
right: 0;
border-left: none;
}
.scarf_up_line{
height: 10px;
width: 10px;
border: 1px solid #000;
border-radius: 50%;
border-bottom: none;
left: 0;
top: 1px;
border-right: none;
border-left: none;
transform: rotate(-35deg);
}
.hand_box{
width: 85px;
height: 30px;
/* border: 1px solid #000; */
transform: rotate(-41deg);
left: -48px;
top: 44px;
}
.hand{
width: 100px;
height: 28px;
border: 1px solid #000;
border-radius: 50%;
background: #0595B8;
box-shadow: 0 2px 2px rgba(0,0,0,0.5);
}
.five{
width: 26px;
height: 26px;
background: #f2f2f2;
border: 1px solid #000;
border-radius: 50%;
left: 0;
top: 1px;
}
.body_empty_1{
width: 40px;
height: 20px;
border-radius: 50%;
background: #0595B8;
right: -15px;
top: 0;
}
.body_empty_2{
width: 40px;
height: 20px;
border-radius: 50%;
background: #0595B8;
right: -15px;
top: 9px;
}
.body_empty_3{
width: 40px;
height: 20px;
border-radius: 50%;
background: #0595B8;
right: -30px;
top: 5px;
}
.left_hand{
top: 93px;
left: 36px;
z-index: -1;
}
.bell_box{
width: 20px;
height: 20px;
left: -14px;
top: 63px;
transform: rotate(-37deg);
}
.bell{
width: 18px;
height: 18px;
border: 1px solid #000;
border-radius: 50%;
background: #F0C73B;
left: 2px;
top: 2px;
}
.bell_hole{
width: 6px;
height: 6px;
background: #514201;
border: 1px solid #000;
border-radius: 50%;
left: 7px;
top: 12px;
transform: rotate(-75deg);
}
.bell_hole:after{
content: "";
position: absolute;
width: 2px;
height: 5px;
background: #514201;
left: 1px;
bottom: -5px;
border-radius: 2px;
}
.bell_handle_1{
width: 4px;
height: 8px;
border: 1px solid #000;
border-radius: 50%;
background: #F0C73B;
transform: rotate(-70deg);
left: -1px;
top: 4px;
}
.bell_handle_2{
width: 5px;
height: 10px;
border: 1px solid #000;
border-radius: 50%;
background: #F0C73B;
transform: rotate(23deg);
left: 1px;
top: 4px;
}
.leg_box{
width: 48px;
height: 60px;
left: 181px;
top: 45px;
}
.leg_right{
height: 55px;
width: 28px;
border: 1px solid #000;
border-radius: 50%;
background: #f2f2f2;
transform: rotate(-20deg);
left: 0;
top: 0;
}
.leg_left{
height: 55px;
width: 30px;
border: 1px solid #000;
border-radius: 50%;
background: #f2f2f2;
transform: rotate(-19deg);
left: 12px;
top: 7px;
}
.tail{
width: 28px;
height: 28px;
/* background: #fff; */
left: 169px;
top: 24px;
transform: rotate(5deg);
}
.tail_running{
animation: tail_running 0.2s ease-in-out infinite alternate;
-moz-animation: tail_running 0.2s ease-in-out infinite alternate;
-webkit-animation: tail_running 0.2s ease-in-out infinite alternate;
-o-animation: tail_running 0.2s ease-in-out infinite alternate;
}
@keyframes tail_running{
0%{
transform: rotate(5deg);
}
100%{
transform: rotate(10deg);
}
}
@-moz-keyframes tail_running{
0%{
transform: rotate(5deg);
}
100%{
transform: rotate(10deg);
}
}
@-webkit-keyframes tail_running{
0%{
transform: rotate(5deg);
}
100%{
transform: rotate(10deg);
}
}
@-o-keyframes tail_running{
0%{
transform: rotate(5deg);
}
100%{
transform: rotate(10deg);
}
}
.tail_line{
width: 8px;
height: 20px;
border-left: 1px solid #000;
border-radius: 50%;
transform: rotate(45deg);
top: 9px;
left: 10px;
}
.tail_round{
width: 18px;
height: 18px;
border: 1px solid #000;
border-radius: 50%;
background: radial-gradient(12px 12px at 8px 8px, #F67259, #CD4353);
top: 0;
right: 0;
}
.windmill{
width: 60px;
height: 50px;
left: 118px;
top: 0;
transform-style: preserve-3d;
z-index: -1;
}
.leaf{
width: 60px;
height: 40px;
transform: rotateX(-66deg) rotateZ(0deg);
}
.running{
animation: rotating 0.03s linear infinite ;
-moz-animation: rotating 0.03s linear infinite ;
-webkit-animation: rotating 0.03s linear infinite ;
-o-animation: rotating 0.03s linear infinite ;
}
@keyframes rotating {
0%{
transform: rotateX(-66deg) rotateZ(0deg);
}
100%{
transform: rotateX(-66deg) rotateZ(360deg);
}
}
@-moz-keyframes rotating {
0%{
transform: rotateX(-66deg) rotateZ(0deg);
}
100%{
transform: rotateX(-66deg) rotateZ(360deg);
}
}
@-webkit-keyframes rotating {
0%{
transform: rotateX(-66deg) rotateZ(0deg);
}
100%{
transform: rotateX(-66deg) rotateZ(360deg);
}
}
@-o-keyframes rotating {
0%{
transform: rotateX(-66deg) rotateZ(0deg);
}
100%{
transform: rotateX(-66deg) rotateZ(360deg);
}
}
.leaf_1{
width: 30px;
height: 12px;
border: 1px solid #333;
border-radius: 50%;
background: #FFE256;
left: 30px;
top: 13px;
}
.leaf_2{
width: 12px;
height: 30px;
border: 1px solid #333;
border-radius: 50%;
background: #FFE256;
transform: rotate(45deg);
left: 17px;
top: 11px;
}
.leaf_3{
width: 30px;
height: 12px;
border: 1px solid #333;
border-radius: 50%;
background: #FFE256;
transform: rotate(45deg);
left: 9px;
top: 5px;
}
.leaf_round{
width: 14px;
height: 14px;
border: 1px solid #333;
border-radius: 50%;
left: 24px;
top: 12px;
background: #FFE256;
}
.leaf_round_up{
width: 10px;
height: 10px;
border: 1px solid #333;
border-radius: 50%;
left: 26px;
top: 14px;
background: #FFE256;
}
.stick{
height: 30px;
width: 5px;
border: 1px solid #999;
border-top: none;
border-radius: 3px;
background: #FFE256;
left: 28px;
top: 22px;
}
.base{
width: 20px;
height: 24px;
border: 1px solid #333;
border-radius: 50%;
background: #FFE256;
left: 21px;
top: 38px;
}
style>
head>
<body>
<div class="canvas">
<div class="bg">
<div class="cloud_group cloud_running">
<div class="cloud_group_1">
<ul class="cloud_1">
<li class="list_1">li>
<li class="list_2">li>
<li class="list_3">li>
<li class="list_4">li>
<li class="list_5">li>
<li class="list_6">li>
<li class="list_7">li>
<li class="list_8">li>
<li class="list_9">li>
<li class="list_10">li>
ul>
<ul class="cloud_2">
<li class="list_1">li>
<li class="list_2">li>
<li class="list_3">li>
<li class="list_4">li>
<li class="list_5">li>
<li class="list_6">li>
<li class="list_7">li>
<li class="list_8">li>
<li class="list_9">li>
<li class="list_10">li>
ul>
<ul class="cloud_3">
<li class="black_1">li>
<li class="black_2">li>
<li class="black_3">li>
<li class="black_4">li>
<li class="black_5">li>
<li class="black_6">li>
<li class="black_7">li>
<li class="black_8">li>
<li class="white_1">li>
<li class="white_2">li>
<li class="white_3">li>
<li class="white_4">li>
<li class="white_5">li>
<li class="white_6">li>
<li class="white_7">li>
<li class="white_8">li>
<li class="white_9">li>
ul>
div>
<div class="cloud_group_2">
<ul class="cloud_1">
<li class="list_1">li>
<li class="list_2">li>
<li class="list_3">li>
<li class="list_4">li>
<li class="list_5">li>
<li class="list_6">li>
<li class="list_7">li>
<li class="list_8">li>
<li class="list_9">li>
<li class="list_10">li>
ul>
<ul class="cloud_2">
<li class="list_1">li>
<li class="list_2">li>
<li class="list_3">li>
<li class="list_4">li>
<li class="list_5">li>
<li class="list_6">li>
<li class="list_7">li>
<li class="list_8">li>
<li class="list_9">li>
<li class="list_10">li>
ul>
<ul class="cloud_3">
<li class="black_1">li>
<li class="black_2">li>
<li class="black_3">li>
<li class="black_4">li>
<li class="black_5">li>
<li class="black_6">li>
<li class="black_7">li>
<li class="black_8">li>
<li class="white_1">li>
<li class="white_2">li>
<li class="white_3">li>
<li class="white_4">li>
<li class="white_5">li>
<li class="white_6">li>
<li class="white_7">li>
<li class="white_8">li>
<li class="white_9">li>
ul>
div>
div>
div>
<div class="fg">
<div class="a_meng">
<div class="head">div>
<div class="face">div>
<div class="left_eye">
<div class="left_line_eye">
div>
div>
<div class="right_eye">
<div class="right_line_eye">div>
div>
<div class="nurse">div>
<div class="mouse_box">
<div class="mouse">
<div class="tongue">div>
div>
div>
<div class="mouse_up">div>
<div class="mouse_left">div>
<div class="mouse_empty_1">div>
<div class="nurse_line">div>
<ul class="beard_box">
<li class="beard_1">li>
<li class="beard_2">li>
<li class="beard_3">li>
<li class="beard_4">li>
<li class="beard_5">li>
<li class="beard_6">li>
ul>
<div class="leg_box">
<div class="leg_right">div>
<div class="leg_left">div>
div>
<div class="body">
<div class="butt">div>
<div class="butt_1">div>
<div class="butt_2">div>
<div class="butt_3">div>
<div class="butt_4">div>
<div class="belly">
<div class="belly_vertical_line">div>
<div class="belly_circle">div>
div>
<div class="scarf">
<div class="scarf_red">div>
<div class="scarf_cut">div>
<div class="scarf_up_line">div>
div>
<div class="bell_box">
<div class="bell">div>
<div class="bell_hole">div>
<div class="bell_handle_1">div>
<div class="bell_handle_2">div>
div>
<div class="hand_box">
<div class="hand">div>
<div class="five">div>
<div class="body_empty_1">div>
<div class="body_empty_2">div>
<div class="body_empty_3">div>
div>
div>
<div class="hand_box left_hand">
<div class="hand">div>
<div class="five">div>
<div class="body_empty_1">div>
<div class="body_empty_2">div>
<div class="body_empty_3">div>
div>
<div class="tail tail_running">
<div class="tail_line">div>
<div class="tail_round">div>
div>
<div class="windmill">
<div class="stick">div>
<div class="leaf running">
<div class="leaf_1">div>
<div class="leaf_2">div>
<div class="leaf_3">div>
<div class="leaf_round">div>
<div class="leaf_round_up">div>
div>
<div class="base">div>
div>
div>
div>
div>
body>
html>
CSS3非常强大，基本只要时间充足，UI设计的图片大都可以使用CSS样式来实现；
三处animation动画均用到了无限循环属性值：infinite；
云层移动达到无缝衔接的原理是：拷贝了一份云层在左侧，共两份云层（共6朵）；
风车的立体转动是利用了CSS3的3D效果：transform: preverse-3d; 然后再围绕Z轴立体旋转风车，具体请看以上源码。
也就是说在父元素设置transform: preverse-3d;即代表这个DIV是3D状态，其子元素transform的rotate,scale,skew,translate均增加了Z轴的值；如：rotateZ(45deg)表示围绕Z轴旋转45度；
详见W3C→ http://www.w3school.com.cn/css3/css3_3dtransform.asp