前一阵子在某个大神的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);
