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

最新推荐文章于 2022-01-10 19:05:51 发布

一狐九

最新推荐文章于 2022-01-10 19:05:51 发布

阅读量258

点赞数 1

本文链接：https://blog.csdn.net/zz_LXW/article/details/101037326

版权

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

一狐九

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何用css动画来画一个多啦A梦

Github预览链接 : https://asdasd111112999.github.io/animation-Doraemon/index.html预览图：这个小demo 会实时的把CSS实现过程输入在左边红色区域。没有做成对称是为了适配ipone6s plus（ github预览链接可以在手机上播放 || 只做了一个适配）。不能翻墙的朋友可以直接复制以下代码HTML部分...
复制链接

扫一扫