利用CSS3 animation绘制动态卡通人物，无需使用JS代码
下图为纯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
利用CSS3 animation绘制动态卡通人物，无需使用JS代码的更多相关文章
- jQuery div内容间隔1秒动态向上滚动HTML、JS代码
demo1: <!DOCTYPE html> <html> <head> <title>div内容间隔1秒动态滚动</title> < ...
- 一款jquery和css3实现的卡通人物动画特效
之前为大家分享了很多jquery和css3的动画实例.今天给大家带来一款非常炫的jquery和css3实现的卡通人物动画特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: < ...
- 利用CSS3实现页面淡入动画特效
利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...
- 利用CSS3实现div页面淡入动画特效
利用CSS3实现页面淡入动画特效 摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...
- 实现了一个百度首页的彩蛋——CSS3 Animation简介
在百度搜索中有这样一个彩蛋:搜索“旋转”,“跳跃”,“反转”等词语,会出现相应的动画效果(搜索“反转”后的效果).查看源码可以发现,这些效果正是通过CSS3的animation属性实现的. 实现这个彩 ...
- CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星 先看效果: 如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y 下面我们利用CSS3的animation写出这样的动画 ...
- 利用CSS3 clip-path裁剪各种图形。
'clip-path'是css3的一个强大属性,我们可以利用它来绘制各种各样的图形,当然不只是这些,接下来一起看看它的强大功能吧. 首先介绍的是clip-path里面的polygon功能,我们可以通过 ...
- css3 animation 属性众妙
转自:凹凸实验室(https://aotu.io/notes/2016/11/28/css3-animation-properties/) 本文不会详细介绍每个 css3 animation 属性(需 ...
- css3 animation动画技巧
一,css3 animation动画前言 随着现在浏览器对css3的兼容性越来越好,使用css3动画来制作动画的例子也越来越广泛,也随着而来带来了许多的问题值得我们能思考.css3动画如何让物体运动更 ...
随机推荐
- 让win7安装时出现版本选项
win7有几种版本,win7旗舰版包含各大版本,修改一下ISO,让安装时出现版本选项窗口: 1.准备好一个官方win7旗舰版安装包IOS光盘镜像. 2.用UltraISO打开光盘镜像并删除source ...
- js原生设计模式——12装饰者模式
1.面向对象模式装饰者 <!DOCTYPE html><html lang="en"><head> <meta charset=&q ...
- jQuery插件Flot实战Demo
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js url参数的获取和设置以及删除
//获取url参数的值:name是参数名 function getQueryString(name) { var reg = new RegExp("(^|&)" + na ...
- 怎样在iis中发布asp.net网站
以windows server2003.vs2008和sql servber2005为例.将开发完成的asp.net网站发布,将发布包放在windows server2003服务器的文件夹下.将web ...
- Microsoft IoT Starter Kit 开发初体验-反馈控制与数据存储
在上一篇文章<Microsoft IoT Starter Kit 开发初体验>中,讲述了微软中国发布的Microsoft IoT Starter Kit所包含的硬件介绍.开发环境搭建.硬件 ...
- android: activity切换之效果
Activity是android应用的重要部分;为了提高用户的体验度,加了Activity之间切换的动画效果,现在介绍的一种切换动画: 是什么效果,大家自已动手测试一下便知道: 先看进入的动画: pa ...
- OGG学习笔记04-OGG复制部署快速参考
OGG学习笔记04-OGG复制部署快速参考 源端:Oracle 10.2.0.5 RAC + ASM 节点1 Public IP地址:192.168.1.27 目标端:Oracle 10.2.0.5 ...
- ADO.NET高级应用
ADO.NET事务处理(4个步骤) 1.调用SqlConnection对象的BeginTransaction()方法,创建一个SqlTransaction对象,标志事务开始. 2.将创建的SqlTra ...
- iOS核心笔记—源代码管理工具-SVN
源代码管理工具-SVN 一. 源代码管理工具概述 1. 源代码管理工具的作用? > 能追踪一个项目从诞生一直到定案的过程 > 记录一个项目的所有内容变化,无限制返回 > 查看特定版本 ...