CSS3实战 - 2d转换 - 我也画一个哆来A梦耍耍
画哆来A梦练了练基本功，源码发上，感兴趣的童鞋可以参考
公用CSS，doraemon.css
.wrapper { margin-top: 100px; text-align: center; }
/* 叮当猫整体 */
.doraemon { padding:50px; display: inline-block; min-width: 360px; position: relative; }
/* 头部 */
.doraemon .head { height: 300px; width: 320px; border-radius: 150px; background: #07bbee; background: linear-gradient( 135deg,#fff 10%, #07bbee 40%, #10a6ce 60%); border: 2px solid #555; position: relative; box-shadow: 5px 7px 10px rgba(0,0,0,0.6); }
/* 眼睛 */
.doraemon .head .eyes { z-index: 15; position: absolute; width: 152px; height: 90px; top: 30px; left: 50%; margin-left: -76px; }
.doraemon .head .eyes .eye { background: #fff; position: absolute; top: 1px; width: 72px; height: 82px; border: 2px solid #000; border-radius: 35px; }
.doraemon .head .eyes .eye.left { left: 1px; }
.doraemon .head .eyes .eye.right { right: 1px; }
/* 眼珠 */
.doraemon .head .eyes .black { position: absolute; bottom: 20px; height: 18px; width: 18px; background: #000; border-radius: 50%; }
.doraemon .head .eyes .black.bleft { right: 1px; }
.doraemon .head .eyes .black.bright { left: 1px; }
/* 脸部 face */
.doraemon .head .face { width: 265px; height: 195px; background: #fff; border-radius: 150px; position: absolute; bottom: 35px; left: 50%; margin-left: -132px; z-index: 5; }
/* 鼻子 z-index:3 */
.doraemon .head .face .nose { position: absolute; top: 32px; left: 50%; margin-left: -20px; height: 34px; width: 34px; background: #c93300; border-radius: 50%; border: 2px solid #000; z-index: 3; }
/* 鼻子上的高光 */
.doraemon .head .face .nose .light { width: 10px; height: 10px; border-radius: 5px; box-shadow: 19px 8px 5px #fff; }
/* 竖直的线 z-index:2 */
.doraemon .head .face .vertline { height: 100px; width: 3px; background: #333; position: absolute; top: 60px; left: 50%; z-index: 2; margin-left: -1.5px; }
/* 小嘴 */
.doraemon .head .face .mouse { width: 220px; height: 220px; position: absolute; border-bottom: 3px solid #333; bottom: 32px; left: 50%; margin-left: -110px; border-radius: 110px; }
/* 胡子 */
.doraemon .whiskers { width: 220px; height: 80px; background: #fff; position: absolute; top: 40px; left: 50%; margin-left: -110px; z-index: 1; }
/* 胡须 */
.doraemon .whiskers .whisker { width: 60px; height: 2px; background: #333; position: absolute; }
/* 左上胡子 */
.doraemon .whiskers .w-l-top { top: 15px; left: 0px; }
/* 左中胡子 */
.doraemon .whiskers .w-l-mid { top: 35px; left: 0px; }
/* 左下胡子 */
.doraemon .whiskers .w-l-btm { top: 55px; left: 0px; }
/* 右上胡子 */
.doraemon .whiskers .w-r-top { top: 15px; right: 0px; }
/* 右中胡子 */
.doraemon .whiskers .w-r-mid { top: 35px; right: 0px; }
/* 右下胡子 */
.doraemon .whiskers .w-r-btm { top: 55px; right: 0px; }
/* 胡子旋转角度 */
.doraemon .whiskers .r160 { -webkit-transform: rotate(160deg); -moz-transform: rotate(160deg); -ms-transform: rotate(160deg); -o-transform: rotate(160deg); transform: rotate(160deg); }
.doraemon .whiskers .r200 { -webkit-transform: rotate(200deg); -moz-transform: rotate(200deg); -ms-transform: rotate(200deg); -o-transform: rotate(200deg); transform: rotate(200deg); }
.doraemon .whiskers .l160 { -webkit-transform: rotate(-160deg); -moz-transform: rotate(-160deg); -ms-transform: rotate(-160deg); -o-transform: rotate(-160deg); transform: rotate(-160deg); }
.doraemon .whiskers .l200 { -webkit-transform: rotate(-200deg); -moz-transform: rotate(-200deg); -ms-transform: rotate(-200deg); -o-transform: rotate(-200deg); transform: rotate(-200deg); }
/* 脖子 */
.doraemon .neck { z-index: 50; height: 20px; width: 230px; background: #c40; border-radius: 10px; border: 2px solid #333; position: relative; margin-top: -40px; margin-left: 44px; }
/* 脖子上的铃铛 */
.doraemon .neck .bell { height: 40px; width: 40px; background: #f9f12a; border-radius: 50%; border: 2px solid #000; position: absolute; left: 50%; margin-left: -22px; top: 8px; }
/* 铃铛线 */
.doraemon .neck .bell-line { height: 2px; width: 40px; border-top: 2px solid #000; border-bottom: 2px solid #000; position: absolute; left: 0px; top: 12px; }
/* 铃铛圆洞 */
.doraemon .neck .bell-circle { width: 12px; height: 10px; background: #000; position: absolute; border-radius: 50%; top: 20px; left: 14px; }
/* 铃铛竖线 */
.doraemon .neck .bell-vertline { width: 3px; height: 10px; background: #000; position: absolute; bottom: 0px; left: 50%; margin-left: -2px; }
/* 身体 */
.doraemon .mbodys { height: 170px; width: 360px; position: relative; }
/* 蓝色身体背景 */
.doraemon .mbodys .mbody { z-index: 2; width: 220px; height: 170px; background: #07beea; background: linear-gradient( 135deg,#07bbee 40%, #10a6ce 60%); position: absolute; left: 50px; top: -5px; border: 2px solid #333; box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.25); }
/* 小围裙 apron */
.doraemon .mbodys .apron { height: 170px; width: 170px; background: #fff; border: 2px solid #000; position: absolute; top: -48px; left: 75px; border-radius: 50%; z-index: 3; }
/* pocket 口袋 */
.doraemon .mbodys .apron .pocket { width: 130px; height: 100px; border: 2px solid #000; border-radius: 0 0 100px 100px; position: absolute; z-index: 4; top: 48px; left: 18px; }
/* pocket-mask 口袋遮布 z-index: 2; */
.doraemon .mbodys .apron .pocket-mask { height: 60px; width: 134px; background: #fff; border-bottom: 2px solid #000; position: absolute; top: 27px; left: 18px; z-index: 5; }
/* 左右手 */
.doraemon .hand-left,
.doraemon .hand-right { width: 100px; height: 100px; position: absolute; }
/* 手臂 */
.doraemon .arm { height: 80px; width: 50px; background: #07beea; position: absolute; top: 1px; border: 2px solid #000; }
/* 手臂颜色 浅蓝 */
.doraemon .arm.s-blue { background: #07beea; }
/* 手臂颜色 浅蓝 */
.doraemon .arm.d-blue { background: #10a6ce; }
/* 拳头 */
.doraemon .arm .hand{ height: 70px; width: 70px; border-radius: 50%; background: #fff; position: absolute; border: 2px solid #000; }
/* 手臂旋转角度 */
.doraemon .arm.l150 { -webkit-transform: rotate(-125deg); -moz-transform: rotate(-125deg); -ms-transform: rotate(-125deg); -o-transform: rotate(-125deg); transform: rotate(-125deg); }
.doraemon .arm.r150 { -webkit-transform: rotate(125deg); -moz-transform: rotate(125deg); -ms-transform: rotate(125deg); -o-transform: rotate(125deg); transform: rotate(125deg); }
/* 左手 */
.doraemon .hand-left { top: -10px; left: 0px; }
/* 左手手臂 */
.doraemon .hand-left .arm { box-shadow: -8px 4px 10px rgba(0, 0, 0, 0.25); }
.doraemon .hand-left .l-hand { left: -10px; top: -50px; box-shadow: inset 14px -8px 23px rgba(0, 0, 0, 0.25); }
.doraemon .hand-left-rewrite { height: 35px; width: 20px; background: #07beea; position: absolute; top: 7px; right: 40px; z-index: 30; }
.doraemon .hand-right-rewrite { height: 35px; width: 20px; background: #10a6ce; position: absolute; top: 7px; left: -2px; z-index: 30; }
/* 右手 */
.doraemon .hand-right { top: -10px; right: 0px; }
/* 右手拳头 */
.doraemon .hand-right .r-hand { top: -52px; left: -10px; box-shadow: inset -2px 18px 30px rgba(0, 0, 0, 0.25); }
/* 右手手臂 */
.doraemon .hand-right .arm { box-shadow: 10px 4px 10px rgba(0, 0, 0, 0.25); }
/* 脚 */
.doraemon .foot { position:relative; z-index: 20; }
/* 左脚 */
.doraemon .foot-left { height: 32px; width: 130px; background: #fff; border:2px solid #000; position: absolute; left: 20px; top: -20px; border-radius: 75px 45px 45px 25px; box-shadow: inset -14px -1px 16px rgba(0, 0, 0, 0.25); z-index: 25; }
/* 右脚 */
.doraemon .foot-right { height: 32px; width: 130px; background: #fff; border:2px solid #000; position: absolute; right: 60px; top: -20px; border-radius: 45px 70px 22px 45px; box-shadow: inset -14px -1px 16px rgba(0, 0, 0, 0.25); z-index: 25; }
/* 裤裆 */
.doraemon .foot-mid { width: 25px; height: 40px; background: #fff; border: 2px solid #000; border-bottom: none; position:absolute; left: 147px; top: -32px; border-radius: 20px 20px 0 0; }html 之 正常的小喵喵 doraemon-normal.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>机器猫</title>
<meta name="author" content=""/>
<link rel="stylesheet" href="doraemon.css"/>
<style> /*----------------start 这里是重写部分，加了个动画，不需要的可以删掉------------------- */ /* 左眼眼珠 */ .doraemon .eyes .bleft { animation-duration: 1s; transform: translate(-10px,10px); animation-iteration-count: infinite; animation-direction:alternate; animation-name: lchange; } /* 右眼眼珠 */ .doraemon .eyes .bright { animation-duration: 1s; transform: translate(10px,10px); transform-delay: 0.5s; animation-iteration-count: infinite; animation-direction:alternate; animation-name: rchange; } /* 眼珠动画 */ @keyframes lchange { 0% { transform: translate(-10px,10px); } 40% { height: 25px; width: 25px; transform: translate(-10px,-25px); } 60% { transform: translate(-20px,-25px); } 70% { transform: translate(-10px,-25px); } 80% { transform: translate(-20px,-25px);; } 100% { transform: translate(-10px,-25px); } } /* 眼珠动画 */ @keyframes rchange { 0% { transform: translate(10px,10px); } 40% { height: 25px; width: 25px; transform: translate(10px,-25px); } 60% { transform: translate(20px,-25px); } 70% { transform: translate(10px,-25px); } 80% { transform: translate(20px,-25px);; } 100% { transform: translate(10px,-25px); } } /*----------------end 这里是重写部分，加了个动画，不需要的可以删掉------------------- */ </style>
</head>
<body>
<div class="wrapper">
<!-- 叮当猫整体 -->
<div class="doraemon">
<!-- 头部 -->
<div class="head">
<!-- 眼睛 -->
<div class="eyes">
<div class="eye left">
<!-- 眼珠 -->
<div class="black bleft"></div>
</div>
<div class="eye right">
<!-- 眼珠 -->
<div class="black bright"></div>
</div>
</div>
<!-- 脸部 -->
<div class="face">
<!-- 鼻子 -->
<div class="nose">
<div class="light"></div>
</div>
<!-- 竖线 -->
<div class="vertline"></div>
<!-- 小嘴 -->
<div class="mouse"></div>
<!-- 胡子 -->
<div class='whiskers'>
<div class="w-l-top whisker l160"></div>
<div class="w-l-mid whisker"></div>
<div class="w-l-btm whisker l200"></div>
<div class="w-r-top whisker r160"></div>
<div class="w-r-mid whisker"></div>
<div class="w-r-btm whisker r200"></div>
</div>
</div>
</div>
<!-- 脖子 -->
<div class="neck">
<!-- 脖子上的铃铛 -->
<div class="bell">
<div class="bell-line"></div>
<div class="bell-circle"></div>
<div class="bell-vertline"></div>
</div>
</div>
<!-- 身体 -->
<div class="mbodys">
<!-- 蓝色身体背景 -->
<div class="mbody"></div>
<!-- apron 围裙 -->
<div class="apron">
<!-- 口袋遮布 -->
<div class="pocket-mask"></div>
<!-- pocket 口袋 -->
<div class="pocket"></div>
</div>
<!-- 左手 -->
<div class="hand-left">
<div class="arm s-blue l150">
<div class="hand l-hand"></div>
</div>
<div class="hand-left-rewrite"></div>
</div>
<!-- 右手 -->
<div class="hand-right">
<div class="arm d-blue r150">
<div class="hand r-hand"></div>
</div>
<div class="hand-right-rewrite"></div>
</div>
</div>
<!-- 脚-->
<div class="foot">
<!-- 左脚 -->
<div class="foot-left"></div>
<!-- 右脚 -->
<div class="foot-right"></div>
<!-- 裤裆 -->
<div class="foot-mid"></div>
</div>
</div>
</div>
</body>
</html>html 之 色色的小喵喵 doraemon-happy.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8"/>
<title>机器猫</title>
<meta name="author" content=""/>
<link rel="stylesheet" href="doraemon.css"/>
<style> /* 嘴巴重写 */ .doraemon .head .face .mouse { margin: 0px; left: 40px; bottom: 16px; z-index: 100; background: red; border:3px solid #333; height: 70px; width: 180px; border-radius:0 0 100px 100px / 0 0 70px 70px; overflow: hidden; } /* 嘴巴上的舌头 */ .doraemon .mouse .tongue { height: 100px; width: 200px; border:2px solid #333; position: absolute; left: 10px; top: 15px; background: orange; border-radius: 50%; } /* 眼珠重写，爱心 */ .doraemon .head .eye-heart { position: relative; top: 20px; } .doraemon .head .eye-heart .heart{ transform: scale(0.7) rotate(45deg); background: linear-gradient(-90deg, #F50A45 0%, #d5093c 40%); box-shadow: 0 0 10px #d5093c; animation: heart 0.7s ease 0s infinite normal; } .doraemon .head .eye-h-left { height: 30px; width: 30px; border-radius: 50%; position: absolute; top: -1px; left: 12px; background: #F50A45; } .doraemon .head .eye-h-right { height: 30px; width: 30px; background: #F50A45; border-radius: 50%; position: absolute; top: -1px; right: 12px; } .doraemon .head .eye-h-btm { height: 30px; width: 30px; background: #F50A45; position: absolute; top: 8px; right: 21px; transform: rotate(45deg); } /* 眼睛上的爱心动画 */ @keyframes heart { 0% { box-shadow: 0 0 10px #d5093c; transform: scale(0.7) rotate(45deg); } 10% { box-shadow: 0 0 15px #d5093c; transform: scale(1) rotate(45deg); } } </style>
</head>
<body>
<div class="wrapper">
<!-- 叮当猫整体 -->
<div class="doraemon">
<!-- 头部 -->
<div class="head">
<!-- 眼睛 -->
<div class="eyes">
<div class="eye left">
<!-- 眼珠 -->
<div class="eye-heart">
<div class="eye-h-left heart"></div>
<div class="eye-h-right heart"></div>
<div class="eye-h-btm heart"></div>
</div>
</div>
<div class="eye right">
<!-- 眼珠 -->
<div class="eye-heart">
<div class="eye-h-left heart"></div>
<div class="eye-h-right heart"></div>
<div class="eye-h-btm heart"></div>
</div>
</div>
</div>
<!-- 脸部 -->
<div class="face">
<!-- 鼻子 -->
<div class="nose">
<div class="light"></div>
</div>
<!-- 竖线 -->
<div class="vertline"></div>
<!-- 小嘴 -->
<div class="mouse">
<div class="tongue"></div>
</div>
<!-- 胡子 -->
<div class='whiskers'>
<div class="w-l-top whisker l160"></div>
<div class="w-l-mid whisker"></div>
<div class="w-l-btm whisker l200"></div>
<div class="w-r-top whisker r160"></div>
<div class="w-r-mid whisker"></div>
<div class="w-r-btm whisker r200"></div>
</div>
</div>
</div>
<!-- 脖子 -->
<div class="neck">
<!-- 脖子上的铃铛 -->
<div class="bell">
<div class="bell-line"></div>
<div class="bell-circle"></div>
<div class="bell-vertline"></div>
</div>
</div>
<!-- 身体 -->
<div class="mbodys">
<!-- 蓝色身体背景 -->
<div class="mbody"></div>
<!-- apron 围裙 -->
<div class="apron">
<!-- 口袋遮布 -->
<div class="pocket-mask"></div>
<!-- pocket 口袋 -->
<div class="pocket"></div>
</div>
<!-- 左手 -->
<div class="hand-left">
<div class="arm s-blue l150">
<div class="hand l-hand"></div>
</div>
<div class="hand-left-rewrite"></div>
</div>
<!-- 右手 -->
<div class="hand-right">
<div class="arm d-blue r150">
<div class="hand r-hand"></div>
</div>
<div class="hand-right-rewrite"></div>
</div>
</div>
<!-- 脚-->
<div class="foot">
<!-- 左脚 -->
<div class="foot-left"></div>
<!-- 右脚 -->
<div class="foot-right"></div>
<!-- 裤裆 -->
<div class="foot-mid"></div>
</div>
</div>
</div>
</body>
</html>