皮卡丘

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>Pikachu</title><link rel="stylesheet" href="css/Pikachu.css" /></head><body><div class="wrapper"><div class="nose"></div><div class="eye left"></div><div class="eye right"></div><div class="face left"></div><div class="face right"></div><div class="lip left"></div><div class="lip right"></div><div class="lowerlip"><div class="mouth"></div></div></div></body>
</html>


*{margin: 0;padding:0;box-sizing: border-box;
}
*::after{box-sizing:border-box;
}
*::before{box-sizing:border-box;
}
body{height: 100vh;border:1px solid green;display: flex;justify-content: center;align-items:center;background-color:#FEE433;
}
.wrapper{width: 400px;height: 320px;position: absolute;
}
.nose{width: 0px;height:0px;border: 13px solid;border-radius: 50%;border-color:black transparent transparent;position: relative;left:50%;top: 25%;transform: translateX(-50%);
}
.eye{width: 50px;height: 50px;border-radius:50% ;background-color: #2E2E2E;border: 5px solid black;float: left;position: absolute;
}
.eye::before{content: "";display:block;width: 20px;height: 20px;border-radius:50%;background-color:white ;transform: translateX(2px) translateY(-1px);
}
.eye.left{position: relative;left:25%;transform: translateX(-50%) translateY(50%);
}
.eye.right{position: relative;left:50%;transform: translateX(50%) translateY(50%);
}
.face{width: 80px;height: 80px;border:2px solid red;border-radius:50% ;background-color: #FC0D1C;position: absolute;top:0;left:0;}
.face.left{position:relative;top:60%;left: 15%;transform: translateX(-50%) translateY(-50%);
}
.face.right{position:relative;top:60%;left: 85%;transform: translateX(-50%) translateY(-150%);
}
.lip{width: 80px;height: 24px;border:4px solid black;background-color:#FEE433;z-index: 1;position:absolute;top:40%;left:50%;
}
.lip.left{border-bottom-left-radius:50% 100%;border-top:none ;border-right: none;transform: translateX(-100%) translateY(-7px) rotate(-30deg) translateX(2px);}
.lip.right{border-bottom-right-radius:50% 100%;border-top:none;border-left: none;transform: translateX(-2px) translateY(-7px) rotate(30deg);
}
.mouth{width: 100px;height: 480px;border:1px solid red;border-radius: 50% ;background-color:#990513 ;position:absolute ;top: -30%;left: 50%;transform: translateX(-50%) translateY(-50%);position: absolute;overflow: hidden;
}
.lowerlip{width: 280px;height: 200px;position:absolute ;top: 50%;left: 50%;transform: translateX(-50%) translateY(-18%);overflow: hidden;
}
.mouth::after{content: " ";display: block;width:150px;height: 150px;border-radius:50% ;background-color:#FC4A62 ;position: relative;top: 90%;transform:  translateX(-25px) translateY(-65%);}

CSS画卡通人物：皮卡丘相关推荐

CSS画卡通人物：哆啦A梦
哆啦A梦 HTML代码块 <!DOCTYPE html> <html><head><meta charset="utf-8" />& ...
python海龟图画皮卡丘_用python画一只皮卡丘
不知道大家前段儿时间有没有看电影<大侦探皮卡丘> 点击播放 GIF 0.1M 肯定很多人都已经被皮卡丘的可爱迷得神魂颠倒那么今天我们就来用python 画一只皮卡丘吧~ 开发工具 ...
教你用python画一个可爱皮卡丘！
听说CSDN里的人都是绘图的好手,那么有种接受挑战嘛,和我一起绘制全网各态皮卡丘! 最近爬虫遇到瓶颈,于是找了几张图皮卡丘的图绘制一下,勉勉强强,还看得的下去,所以滋生了一个绘图比赛,本篇博客讲诉大致 ...
用python画一只皮卡丘_python：画一只会眨眼睛的皮卡丘
Pikaqiu 用turtle绘画的皮卡丘首先我们导入turtle库和time库(用来做动画使用): import turtle as t import time 由于turtle没有画曲线的函数, ...
python画卡通人物_追忆童年，教你用Python画出儿时卡通人物
作者 | 张同学来源 | 凹凸数据大家好,我是张同学. 又到一年一度的国际儿童节,作为逢节必过的程序猿,怎么可以放过这个学习技能的机会呢? 于是,今天我们来学习 Python 的 Turtle 库 ...
python画卡通人物_用Python 绘制儿童卡通人物，一起过儿童节
又到一年一度的国际儿童节,今天我们来学习一下用 Python 的 Turtle 库绘制童年的卡通人物,一起做回年轻的那个少年. Turtle图形库,又称海龟库,是 Python 语言中一个很流行的绘制 ...
用python画卡通人物柒_追忆童年，教你用Python画出儿时卡通人物
大家好. 又到一年一度的国际儿童节,作为逢节必过的程序猿,怎么可以放过这个学习技能的机会呢? 于是,今天我们来学习 Python 的 Turtle 库绘制童年的卡通人物,一起做回年轻的那个少年. Tu ...
python画卡通人物用什么_干啥啥不行，吹牛第一名——Python头像动漫化，快来用女朋友照片生成一个动漫头像吧...
目录 Python头像动漫化,快来生成一个自己的动漫头像吧一.前言很多时候我们都会为头像发愁,像我这种万年不换头像的咸鱼从来没有这种烦恼.但是吧,有个个性化的头像还是非常有趣的,因为这个抠鼻屎的头 ...
用python画卡通人物的画法_教你绘制扁平化风格的卡通人物肖像
今天的教程,一起来学人物肖像的绘制方法,学会了可以用作头像或者设计素材(描绘不同的职业类型),也可以直接给自己画一个,实用不难,走起练一发! 现在开始我们的教程吧. 第一步: 我们将开始我们第一个任务 ...

CSS画卡通人物：皮卡丘

皮卡丘

CSS画卡通人物：皮卡丘相关推荐

最新文章

热门文章