如何用css动画来画一个多啦A梦

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出，供大家学习,谢谢。

如何用css动画来画一个多啦A梦相关推荐

java旋转太极图_如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
太极图php代码,如何用CSS纯代码画一个旋转的太极图（附代码）
这是一个中国人都非常熟悉的图案--太极图,它分为阴阳两级,会旋转(用到css3 animation动画属性),此图通过css3纯代码实现,它由若干个小圆组合而成,适合初学css3的人练练手,娱以致 ...
css如何调整红心样式_如何用html和CSS3画一个红心（爱心），初级简单代码实现...
html和css是可以画一个红心的,可能许多刚学习web前端的朋友不知道,我们现在演示一下,大家以后遇到类似的东西可以不用图片来做了,可以直接写代码,图片需要从服务器传递请求再回复请求,如果一个网页图 ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
如何用CSS动画特效让图片旋转起来
杜老师逆战班学员 2020.02.22 我们通常浏览网页,基本上看过去都是呈现着各种文字加图片的2D效果信息,作为一名前端开发工程师非常重要的工作就是要让用户看到网页时有眼前一亮.耳目一新的感觉,用户 ...
前端每日实战：108# 视频演示如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/Yjomyd 可交互视频此视频是可 ...
如何用 CSS 和 D3 创作一个抽象的黑白交叠动画
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/Yjomyd 可交互视频 ...
如何用 CSS 和 D3 创作一个用文字组成的心形图案
效果预览在线演示按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/xJvERW 可交互视频 ...
【HTML+CSS练习】画一个条件查询
HTML+CSS练习,创建条件查询相关数据使用HTML+CSS,绘制一个条件查询的状态栏搜索具体效果如下: 注:要是觉得文章写得不错,记得留个赞哦! HTML代码如下: <!DOCTYPE ...

如何用css动画来画一个多啦A梦

如何用css动画来画一个多啦A梦相关推荐

最新文章

热门文章