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出，供大家学习,谢谢。
转载：https://blog.csdn.net/zz_LXW/article/details/101037326
查看评论