前一阵子在某个大神的github上看到他用写代码的形式来完成一个皮卡丘,于是心血来潮花了半个小时,也完成了一个作品.
这其中涉及到的知识点也不是很复杂,就主要是css定位的知识居多,然后就是边框属性如何画形状.
在线浏览网址:css画皮卡丘(友情提示:请电脑访问,由于定位属性的问题,手机显示不是很美观!)
然后就是一步步拼凑成的,怎么说呢,按照鼻子,眼睛,脸,嘴以及舌头来画的.
效果截图如下所示:
代码很简单,如下:
html代码:
<div id="code"> ???????<pre id="codeEditor"></pre> ???</div> ???<div id="pikachu"> ???????<div class="pikachu_container"> ???????????<div class="downlips-container"> ???????????????<div class="downlips"></div> ???????????</div> ???????????<div class="nose"></div> ???????????<div class="eye eyeLeft"></div> ???????????<div class="eye eyeRight"></div> ???????????<div class="face faceLeft"></div> ???????????<div class="face faceRight"></div> ???????????<div class="uplips uplipsLeft"></div> ???????????<div class="uplips uplipsRight"></div> ???????</div> ???</div>
css代码:
*{ ???????????margin: 0; ???????????padding: 0; ???????} ???????#code { ???????????width: calc(48% - 10px); ???????????height: 100%; ???????????border: 1px solid rgb(94, 90, 90); ???????????position: absolute; ???????????left: 0; ???????????top: 0; ???????} ???????#code pre{ ???????????width: 100%; ???????????height: 100%; ???????????display: inline-block; ???????????overflow: hidden; ???????????overflow-y: auto; ???????} ???????#pikachu{ ???????????width: calc(50% - 10px); ???????????margin-left: 5px; ???????????margin-right: 5px; ????????????height: 100%; ???????????position: absolute; ???????????right: 0; ???????????top: 0; ???????????border: 1px solid #302e2e; ???????} ???????#pikachu .pikachu_container{ ???????????width: 100%; ???????????height: 100%; ???????????position: absolute; ???????????top: 0; ???????????right: 0; ???????}js代码:
var code = `/* * 首先准备好皮卡丘背景颜色*/.pikachu_container{ ???background: #d3eb4b;}/* * 画皮卡丘鼻子*/.nose{ ???width: 0; ???height: 0; ???border: 12px solid; ???border-left-color: transparent; ???border-right-color: transparent; ???border-bottom-color: transparent; ???border-top-color: #000000; ???position: absolute; ???left: 50%; ???top: 120px; ???border-radius: 12px; ????margin-left: -9px;}/* * 画皮卡丘眼睛*/.eye{ ???width: 50px; ???height: 50px; ???border-radius: 50%; ???background-color: #2e2e2e; ???border: 2px solid #000000; ???position: absolute; ???left: 50%; ???top: 80px;}.eyeLeft{ ???margin-left: -92px;}.eyeRight{ ???margin-left: 44px;}/* * 画皮卡丘眼珠*/.eye:before{ ???content: ‘‘; ???width: 25px; ???height: 25px; ???position: absolute; ???background-color: #ffffff; ???border-radius: 50%; ???top: 2px; ???left: 6px;}/* * 画皮卡丘的脸腮*/.face{ ???width: 70px; ???height: 70px; ???background: rgb(230, 62, 40); ???border: 2px solid #000000; ???border-radius: 50%; ???position: absolute; ???top: 180px;}.faceLeft{ ???left: 20px;}.faceRight{ ???right: 20px;}/* * 画皮卡丘嘴唇* 先画上嘴唇*/.uplips{ ???width: 80px; ???height: 20px; ???border: 2px solid #000000; ???background: #d3eb4b; ???position: absolute; ???border-top: none; ???top: 150px;}.uplipsLeft{ ???right: 50%; ???border-bottom-left-radius: 40px 25px; ???border-right: none; ???transform: rotate(-18deg);} ??.uplipsRight{ ???left: 50%; ???border-left: none; ???border-bottom-right-radius: 40px 25px; ???transform: rotate(18deg);}/* * 然后画下嘴唇*/.downlips-container{ ???position: absolute; ???left: 50%; ???top: 160px; ???margin-left: -150px; ???height: 110px; ???width: 300px; ???overflow: hidden;}.downlips{ ???width: 300px; ???height: 3500px; ???background-color: #990513; ???border-radius: 200px/2000px; ???position: absolute; ???bottom: 0; ???border: 2px solid #000000; ???overflow: hidden;}.downlips:after{ ???content:‘‘; ???width: 100px; ???height: 100px; ???position: absolute; ???background: #fc4a62; ???border-radius: 50%; ???left: 50%; ???margin-left: -50px; ???bottom: -20px;}`; ???function writeCode(str){ ???????var n = 0; ???????var timer = setInterval(function(){ ???????????n++; ???????????document.getElementById(‘codeEditor‘).innerHTML = str.substring(0,n); ???????????document.getElementById(‘styleEditor‘).innerHTML = str.substring(0,n); ???????},100); ???????if(n > str.length - 1){ ???????????clearInterval(timer); ???????} ???} ???writeCode(code);
用css以写代码形式画一个皮卡丘
原文地址：https://www.cnblogs.com/eveningwater/p/8542541.html