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

淡淡的烟草味﹌ 2024-04-19 16:27 60阅读 0赞

> Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html

预览图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70]  
这个小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出，供大家学习,谢谢。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6X0xYVw_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/545cdfb1095443a18cf9d07e4f66fa9b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，60人围观）

还没有评论，来说两句吧...

相关阅读

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

Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html 预览图： ...

淡淡的烟草味﹌/ 2024年04月19日 16:27/ 0 赞/ 61 阅读

相关【日常】怀念儿童时的多啦A梦

怀念儿童时期的多啦A梦儿童时期的乐趣 HTML 多啦A梦效果图：总结对自己孩子的期望儿童时

待我称王封你为后i/ 2024年03月16日 11:55/ 0 赞/ 62 阅读

相关哆啦A梦主题网站(HTML5+CSS3+Javascript)

哆啦A梦主题网站 1 简介 2 技术介绍 3 项目演示和获取方式 4 打开方式 5 页面图片展示 6 部分代码展示 1 简介

待我称王封你为后i/ 2023年10月09日 21:54/ 0 赞/ 52 阅读

相关 Python：27画叮当猫—哆啦A梦

代码献上： import turtle as t t.speed(5) t.pensize(8) t.hideturtle() t.

- 日理万妓/ 2023年07月18日 14:12/ 0 赞/ 24 阅读

相关代码实现多啦A梦效果图

HTML+CSS源码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:

浅浅的花香味﹌/ 2023年06月10日 07:28/ 0 赞/ 3 阅读

相关教你如何用Canvas绘制整身的哆啦A梦

教你如何用Canvas绘制整身的哆啦A梦上牌你文章我们说到了如何使用canvas绘制哆啦A梦，但当时只是绘制了哆啦A梦的头部，之后有学员留言说可不可以教大家绘制整身的哆

喜欢ヅ旅行/ 2023年02月17日 13:29/ 0 赞/ 18 阅读

相关如何用CSS 画一个三角形？

这里新创建了一个专题，为自己之后的跳槽做准备，每天给自己一个小时的时间去看网上的一些面试题，并且将这些面试题的答案加上自己思考以及动手时间的内容整理成笔记，记录下来。尤其

怼烎@/ 2022年12月24日 06:54/ 0 赞/ 258 阅读

相关利用canvas画布画哆啦A梦

简易版哆啦A梦源代码： <!DOCTYPE html> <html> <head> <title>哆啦A梦</ti

梦里梦外;/ 2022年12月01日 01:26/ 0 赞/ 298 阅读

相关用 CSS 找回童年的快乐，哆啦A梦伴你同行

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 ![3ef10e9c75c27d483166491c72169a2f.png][] 前

浅浅的花香味﹌/ 2022年10月08日 05:33/ 0 赞/ 209 阅读

相关月薪80k的前端工程师——纯CSS画出哆啦A梦，网友：优秀！

虽然说没用啥什么高级的技巧，但这让我感受到了CSS的乐趣！好好学习，天天向上！用css画一个哆啦A梦原图：效果图：代码都发出来了，不看完就太可惜了哦！ >

拼搏现实的明天。/ 2022年04月25日 02:38/ 0 赞/ 236 阅读