利用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

转载于:https://www.cnblogs.com/feelinear/p/6497657.html

利用CSS3 animation绘制动态卡通人物，无需使用JS代码相关推荐

css元素发光效果图,纯CSS3实现圆圈动态发光特效动画的示例代码
本文主要介绍了纯CSS3实现圆圈动态发光特效动画的示例代码,分享给大家,具体如下: 效果图: 代码: 纯CSS3实现圆圈动态发光特效动画 body { background-color: #00000 ...
Python：利用python语言绘制多个子图经典案例、代码实现之详细攻略
Python:利用python语言绘制多个子图经典案例.代码实现之详细攻略目录利用python语言绘制多个子图代码实现.经典案例 1.绘制多个子图框架多个子图绘制的经典案例 1.绘制多个直方图 ...
python画卡通人物_用Python 绘制儿童卡通人物，一起过儿童节
又到一年一度的国际儿童节,今天我们来学习一下用 Python 的 Turtle 库绘制童年的卡通人物,一起做回年轻的那个少年. Turtle图形库,又称海龟库,是 Python 语言中一个很流行的绘制 ...
渗透学习-学习记录-利用浏览器的开发者工具实时修改网页前端JS代码（实现绕过）
文章目录前言一.JS前端的修改前言最近学习了一些有关于JS脚本搭建网站方面的安全知识.通常来说JS是前端的页面代码,因此我们可以直接修改前端的JS代码来实现绕过,故我试着做了一下利用浏览器的开 ...
css3中的animation的动画帧制作-卡通人物的走动效果
css3中的animation的动画帧制作-卡通人物的走动效果代码如下: <!DOCTYPE html> <html lang="en"> <hea ...
《Turtle绘图》Python用Turtle库绘制多啦爱梦、小猪佩奇、皮卡丘等卡通人物
声明本文仅在CSDN发布,未经允许请勿转载或引用! 本文链接:https://blog.csdn.net/meenr/article/details/107245170 目录利用Turtle库绘制 ...
超详细的Python matplotlib 绘制动态图
复习回顾在matplotlib模块中我们前面学习绘制如折线.柱状.散点.直方图等静态图形.我们都知道在matplotlib模块主要有三层脚本层为用户提供快捷的绘制图形方法,美工层接收到脚本层的命令后 ...
HTML打造动漫人物,19个搭配很酷的卡通人物网站设计欣赏
19个搭配很酷的卡通人物网站设计欣赏 11月 6, 2014 评论 Sponsor 使用插画.卡通人物这些设计元素来搭配网站是很不错的idea,因为他很容易让用户记住你的网站,特别是绘制有趣的卡通人物 ...
css拖动音乐进度条,利用CSS3实现3D滑块进度条拖动动画特效
特效描述:利用CSS3实现 3D滑块进度条拖动动画特效.利用CSS3实现3D滑块进度条拖动动画特效代码结构 1. HTML代码 Scalable 3D Range Sliders Simple ...
Node四种动态加载JS代码方法性能对比
背景我们运行node程序的时候,一般情况下,js代码都是事先写好在js文件里,然后启动的时候加载到内存中执行的.在一些特殊的需求下,我们可能会执行一些动态的js代码. 四种方法目前我能想到的方法有 ...

利用CSS3 animation绘制动态卡通人物，无需使用JS代码

利用CSS3 animation绘制动态卡通人物，无需使用JS代码相关推荐

最新文章

热门文章