Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html
预览图：
这个小demo 会实时的把CSS实现过程输入在左边红色区域。
没有做成对称是为了适配ipone6s plus（ github预览链接可以在手机上播放 || 只做了一个适配 ）。
不能翻墙的朋友可以直接复制以下代码
HTML部分
<body><style id="styleTag"></style><pre id="coding"></pre><div class="outline"><div class="innerline"></div><div class="bellring"><div class="bell"><div class="bell_element_top"></div><div class="bell_element_midden"></div><div class="bell_element_bottom"></div></div></div><div class="left_eye"></div><div class="right_eye"></div><div class="nose"><div class="nose_highlight"></div></div><div class="lips"><div class="beard"><div class="left_top left_beard"></div><div class="right_top right_beard"></div><div class="left_midden left_beard"></div><div class="right_midden right_beard"></div><div class="left_bottom left_beard"></div><div class="right_bottom right_beard"></div></div><div class="mouth"><div class="mouth_center"></div><div class="mouth_bottom"></div></div></div></div></body>
一个特别长的JS部分
var css = `/*首先做一点准备工作*/*{margin: 0;padding: 0;box-sizing: border-box;transition: all 1s;} /*布置一下背景*/body{background:#159EFF;}#coding{color:yellow;display: inline-block;width: 40%;height: 100vh;background: red;overflow: hidden;padding:20px;font-size:15px;font-weight:400;}/*开始画吧*//*先画一个圆脸*/.outline{position: absolute;top:20%;right:10%;display: inline-block;border: 5px solid black;height: 300px;width: 300px;background:#159EFF;border-radius: 50%;}.innerline{position: absolute;bottom:-3px;left: 50%;margin-left: -125px;border: 3px solid black;height: 250px;width: 250px;background: white;border-radius: 50%;}/*画铃铛*/.bellring{position: absolute;bottom:-2px;left: 50%;margin-left: -75px;height: 20px;width: 150px;background: red;border: 3px solid black;border-radius: 10px;}.bell{position: absolute;bottom:-25px;left: 50%;margin-left: -17.5px;height: 35px;width: 35px;background: yellow;border: 2px solid black;border-radius: 50%;}.bell_element_top{position: absolute;top:4px;left: 50%;margin-left: -17px;height: 5px;width: 34px;background: yellow;border: 2px solid black;border-radius: 10px;}.bell_element_midden{position: absolute;top: 9px;left: 50%;margin-left: -6.5px;height: 13px;width: 13px;background: #808080;border: 2px solid black;border-radius: 10px;}.bell_element_bottom{position: absolute;top: 21px;left: 50%;height: 12px;border: 1px solid black;margin-left: -1px;}/*画眼睛*/.left_eye{margin-left: -73px; }.right_eye{margin-left: 0px; }.left_eye,.right_eye{position: absolute;top:17px;left: 50%;border: 3px solid black;height: 75px;width: 75px;background: white;border-radius: 50%;}.left_eye::after{left: 50%;}.right_eye::after{right:50%;}.left_eye::after,.right_eye::after{position: absolute;top:17px;content: "";display: block;border: 3px solid black;height: 20px;width: 15px;background: white;border-radius: 50% 50% 0 0;border-bottom: transparent;}/*画鼻子*/.nose{position: absolute;top:77px;left: 50%;margin-left: -25px;height: 50px;width: 50px;background: red;border: 2px solid black;border-radius: 50%;}/*来点高光！*/.nose_highlight{position: absolute;top:5px;left: 20px;height: 15px;width: 15px;background: white;border-radius: 50%;}/*画胡子准备!*/.beard>*{z-index: 2;content: "";height: 0px;width: 80px;background: #000;border: 1px solid black;border-radius: 50%;position: absolute;}/*先画左边*/.beard>.left_beard{left: 20px;}.beard>.left_top{top:100px;transform: rotate(15deg);}.beard>.left_midden{top:130px;transform: rotate(0deg);}.beard>.left_bottom{top:160px;transform: rotate(-15deg);}/*再画右边！*/.beard>.right_beard{right: 20px;}.beard>.right_top{top:100px;transform: rotate(-15deg);}.beard>.right_midden{top:130px;transform: rotate(0deg);}.beard>.right_bottom{top:160px;transform: rotate(15deg);}/*最后画嘴巴啦！*/.mouth>.mouth_center{position: absolute;top:140px;left: 50%;z-index: 1;content: "";width: 0px;height: 70px;border: 1px solid black;}.mouth>.mouth_bottom::after{position: absolute;top:-5px;left: -5px;content: "";height: 65px;width: 210px;border-radius: 25% ;background:white;display: block;}.mouth>.mouth_bottom{position: absolute;top:145px;left: 50%;margin-left: -100px;content: "";height: 80px;width: 200px;border: 2px solid black;border-radius: 50% ;}/**最后一个开心的多啦A梦送给你！*每天开心!*Over*/`function write_css() {let coding = document.querySelector("#coding");let styleTag = document.querySelector("#styleTag");let n = 0;let id = setInterval(() => {n++;coding.innerHTML = css.substring(0, n);styleTag.innerHTML = css.substring(0, n);coding.scrollTop = coding.scrollHeight;if (n >= css.length) {window.clearInterval(id); }}, 15)}write_css();
最后，这个demo做的比较粗糙，如果有朋友在这基础上做了优化还请po出，供大家学习,谢谢。
