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

淡淡的烟草味﹌ 2024-04-19 16:27 44阅读 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 条评论，44人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 80行代码！用Python做一个哆来A梦分身

![ddd89acaf6d143aafddcadee928d3e15.png][] ![3962e82a7594995ad774f3e723cf178d.png][] 对于

旧城等待，/ 2022年09月10日 11:29/ 0 赞/ 165 阅读

相关 C语言绘制哆啦A梦

用C语言绘制哆啦A梦一、在电脑上安装C/C++编译器- -VC++ 6.0 百度网盘提取链接： [https://pan.baidu.com/s/1i0e9p\

本是古典何须时尚/ 2022年09月03日 09:23/ 0 赞/ 346 阅读

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

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

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

相关如何利用 CSS 的动画原理，创作一个乒乓球对打动画

![2538044782-5b0f3acce8c06_articlex-1.png][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前

末蓝、/ 2022年04月15日 04:07/ 0 赞/ 328 阅读

相关如何用纯 CSS 创作一个菱形 loader 动画

![1504257-20181123141938657-1382561159.png][] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当

今天药忘吃喽~/ 2022年04月14日 02:48/ 0 赞/ 243 阅读

相关如何用纯 CSS 创作一个变色旋转动画

![在这里插入图片描述][20181129005446846.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

左手的ㄟ右手/ 2022年04月13日 10:10/ 0 赞/ 382 阅读

相关如何用纯 CSS 创作一个方块旋转动画

![在这里插入图片描述][20181206170941871.gif] 效果预览 [在线演示][Link 1] 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接

爱被打了一巴掌/ 2022年04月11日 13:51/ 0 赞/ 285 阅读