实现的皮卡丘样式以下图：

本篇内容List：

tip1--全局样式初始化，配置

tip2--实现鼻子

tip3--实现眼睛

tip4--实现脸颊

tip5--嘴巴实现

1.先进行页面总体的样式配置

这里咱们要在手机端展现，因此咱们尽可能整个图形的宽度要小于手机屏幕的最小宽度，代码以下：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::before {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

//设置body样式使内容居中等

body {

width: 100%;

height: 100vh;

background-color: yellow;

border: 1px solid green;

display: flex;

justify-content: center;

align-items: center;

}

//为咱们须要画图的主体区域

.wrapper {

width: 100%;

height: 220px;

position: relative;

}

2.鼻子的绘画

利用一个div盒子宽高等于0，而后给予边宽来撑大盒子，再取消不须要的边框，就能够实现一个圆饼的效果，代码以下

.nose {

width: 0;

height: 0;

border: 11px solid red;

border-radius: 12px;

border-color: black transparent transparent transparent;

position: absolute;

left: 50%;

top: 28px;

transform: translate(-12px);

}

3.眼睛的绘画

咱们把相同的眼睛代码写在一个class中，左右眼不一样的样式分别写类名来控制，在测量的时候咱们能够以最中间的鼻子基准来写代码，代码以下；

.eye {

width: 49px;

height: 49px;

background-color: #2E2E2E;

border-radius: 50%;

position: absolute;

border: 2px solid #000;

}

.eye::before {

content: '';

display: block;

width: 24px;

height: 24px;

background-color: white;

position: absolute;

border-radius: 50%;

left: 6px;

top: -1px;

border: 2px solid #000;

}

.eye.left {

right: 50%;

margin-right: 90px

}

.eye.right {

left: 50%;

margin-left: 90px

}

3.脸颊的绘画

脸颊的绘画不难，咱们须要准确测量位置，代码以下：

.face {

width: 65px;

height: 68px;

background-color: #f92726;

border: 2px solid black;

border-radius: 50%;

position: absolute;

top: 85px;

}

.face.left {

right: 50%;

margin-right: 116px;

}

.face.right {

left: 50%;

margin-left: 116px;

}

4.嘴的绘画

为了实现舌头，结构图以下；

代码以下：

.upperLip {

height: 20px;

width: 80px;

border: 3px solid black;

position: absolute;

top: 52px;

background-color: yellow;

z-index: 1;

}

.upperLip.left {

border-bottom-left-radius: 40px 20px;

border-top: none;

border-right: none;

transform: rotate(-20deg);

right: 50%;

}

.upperLip.right {

left: 50%;

border-bottom-right-radius: 40px 20px;

border-top: none;

border-left: none;

transform: rotate(20deg);

}

.lowerLip-wrapper {

width: 120px;

height: 130px;

position: absolute;

left: 50%;

margin-left: -60px;

margin-top: 56px;

overflow: hidden;

}

.lowerLip {

height: 1000px;

width: 120px;

border-radius: 200px/800px;

border: 2px solid black;

background-color: #971818;

position: absolute;

bottom: 0;

overflow: hidden

}

.tongue {

width: 100px;

height: 100px;

border-radius: 50px;

left: 8px;

background-color: #f95364;

position: absolute;

bottom: 0;

z-index: 2;

}

以上就可实现一个皮卡丘了，现附上整个静态皮卡丘代码：

JS Bin

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::before {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

width: 100%;

height: 100vh;

background-color: yellow;

border: 1px solid green;

display: flex;

justify-content: center;

align-items: center;

}

.wrapper {

width: 100%;

height: 220px;

position: relative;

}

.nose {

width: 0;

height: 0;

border: 11px solid red;

border-radius: 12px;

border-color: black transparent transparent transparent;

position: absolute;

left: 50%;

top: 28px;

transform: translate(-12px);

}

.eye {

width: 49px;

height: 49px;

background-color: #2E2E2E;

border-radius: 50%;

position: absolute;

border: 2px solid #000;

}

.eye::before {

content: '';

display: block;

width: 24px;

height: 24px;

background-color: white;

position: absolute;

border-radius: 50%;

left: 6px;

top: -1px;

border: 2px solid #000;

}

.eye.left {

right: 50%;

margin-right: 90px

}

.eye.right {

left: 50%;

margin-left: 90px

}

.face {

width: 65px;

height: 68px;

background-color: #f92726;

border: 2px solid black;

border-radius: 50%;

position: absolute;

top: 85px;

}

.face.left {

right: 50%;

margin-right: 116px;

}

.face.right {

left: 50%;

margin-left: 116px;

}

.upperLip {

height: 20px;

width: 80px;

border: 3px solid black;

position: absolute;

top: 52px;

background-color: yellow;

z-index: 1;

}

.upperLip.left {

border-bottom-left-radius: 40px 20px;

border-top: none;

border-right: none;

transform: rotate(-20deg);

right: 50%;

}

.upperLip.right {

left: 50%;

border-bottom-right-radius: 40px 20px;

border-top: none;

border-left: none;

transform: rotate(20deg);

}

.lowerLip-wrapper {

width: 120px;

height: 130px;

position: absolute;

left: 50%;

margin-left: -60px;

margin-top: 56px;

overflow: hidden;

}

.lowerLip {

height: 1000px;

width: 120px;

border-radius: 200px/800px;

border: 2px solid black;

background-color: #971818;

position: absolute;

bottom: 0;

overflow: hidden

}

.tongue {

width: 100px;

height: 100px;

border-radius: 50px;

left: 8px;

background-color: #f95364;

position: absolute;

bottom: 0;

z-index: 2;

}

html5做一个皮卡丘,画一只会动的皮卡丘（上）相关推荐

  1. 画一只会动的皮卡丘（上）

    实现的皮卡丘样式如下图: 本篇内容List: tip1--全局样式初始化,配置 tip2--实现鼻子 tip3--实现眼睛 tip4--实现脸颊 tip5--嘴巴实现 1.先进行页面整体的样式配置 这 ...

  2. 画一只会动的皮卡丘（下）

    !精品网站推荐: 一个喜欢开发的小玩意的网站: https://codepen.io/ 本篇清单List 1. 页面布局 2. 动态生成代码与皮卡丘style 3. 3.实现速度的控制 上篇中我们已经 ...

  3. 用python画皮卡丘源代码-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...

    原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...

  4. python简单代码画皮卡丘-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...

    原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...

  5. python画卡通皮卡丘_实现童年Pokémon，教你用Python画一只属于自己的皮卡丘

    原标题:实现童年Pokémon,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵 ...

  6. 怎么用python画皮卡丘_实现童年宝可梦，教你用Python画一只属于自己的皮卡丘

    原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...

  7. 一个html5页面,html5做一个黑板报页面

    html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...

  8. html网页设计板报,html5做一个黑板报页面

    html5做一个黑板报页面 我们结合移动设备(手机和平板电脑)的特性,介绍HTML5中新增的语义化标签元素,以及在移动Web浏览器下Web页面布局的知识及例子. 在HTML5标准添加的新元素中,用于常 ...

  9. html5做一个皮卡丘,用css实现一个皮卡丘

    前言 当我学完cs能还有都这房搞名移页通带近啥是点是三子清s和js后,冒出来一个想法.自己去实现一个可爱的卡通人物.于是我就去codepen找素材,最终选择了皮卡丘,支器事的后功发久这含层请间业在屏有 ...

最新文章

  1. 龙岩学院和三明学院计算机专业,龙岩学院和三明学院哪个比较好？
  2. java面向对象程序设计第三版_JAVA面向对象程序设计之创建型设计模式
  3. 波卡链Substrate （6）SubstrateUI界面
  4. MySQL-线上删除表流程
  5. Processing中PDF格式输出
  6. 港中文用 Zoom 考试，中途遭黑客入侵传播不可描述内容
  7. Rust: Vec用法及其它
  8. ukij手机字体_微信小程序一些常见的坑
  9. 修改 xweibo 的memcache代码，让xweibo支持wincache，加快xweibo速度
  10. 人智导（二）：启发式搜索
  11. php 横屏和竖屏,面试问题，视频横屏与竖屏的设计差异？我是这样回答的
  12. URL 编码 - 从 %00 到 %ff
  13. 重载（Overload）和重写（Override）的区别？
  14. 基于MapGIS的GIS二次开发作业文档
  15. 优酷视频APP的缓存视频在哪里
  16. 博达交换机S2528PB常用配置命令
  17. 14位125MSPS四通道ADC电路图讲解（通过后端数字求和增强SNR性能）_电工基础电路图讲解
  18. 夜神模拟器连接手柄无反应_夜神安卓模拟器连接手柄的具体操作方法介绍
  19. java 使用adobe fms流媒体
  20. Android .9图片制作

热门文章

  1. 图像处理基础 || (二) 彩色图像转灰度图像
  2. 机器人学Robotics学习资料 | 我的SLAM入门路线分享
  3. 苹果6访问限制密码4位_苹果的Safari浏览器将比谷歌的Chrome浏览器更加安全
  4. 数据库sql语句查询选修了全部课程的学生姓名。
  5. 亚马逊、阿里、京东对奢侈品“真香“，为何巨头难啃下这块蛋糕？
  6. Java第三方支付接入案例（支付宝）
  7. w8服务器dns修改,Win8系统怎么查看和修改路由器DNS设置？
  8. 南卡、华为哪个更好用？南卡和华为蓝牙耳机评测
  9. 微信小程序实现堆叠式轮播
  10. Gray码问题---分治法实验2