画一只会动的皮卡丘(上)
实现的皮卡丘样式如下图:
本篇内容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;}
以上就可实现一个皮卡丘了,现附上整个静态皮卡丘代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>JS Bin</title><style>* {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;}</style>
</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="upperLip left"></div><div class="upperLip right"></div><div class="lowerLip-wrapper"><div class="lowerLip"><div class="tongue"></div></div></div>
</div>
</body>
</html>
画一只会动的皮卡丘(上)相关推荐
- 画一只会动的皮卡丘(下)
!精品网站推荐: 一个喜欢开发的小玩意的网站: https://codepen.io/ 本篇清单List 1. 页面布局 2. 动态生成代码与皮卡丘style 3. 3.实现速度的控制 上篇中我们已经 ...
- html5做一个皮卡丘,画一只会动的皮卡丘(上)
实现的皮卡丘样式以下图: 本篇内容List: tip1--全局样式初始化,配置 tip2--实现鼻子 tip3--实现眼睛 tip4--实现脸颊 tip5--嘴巴实现 1.先进行页面总体的样式配置 这 ...
- 用python画皮卡丘源代码-实现童年宝可梦,教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
- python简单代码画皮卡丘-实现童年宝可梦,教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
- python画卡通皮卡丘_实现童年Pokémon,教你用Python画一只属于自己的皮卡丘
原标题:实现童年Pokémon,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵 ...
- 怎么用python画皮卡丘_实现童年宝可梦,教你用Python画一只属于自己的皮卡丘
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
- 用python画皮卡丘画法-实现童年宝可梦,教你用Python画一只属于自己的皮卡丘
皮卡丘脸颊两边有着小小的电力袋,因此他独有的能力就是可以放电.在动画片中,小智的皮卡丘性格十分害羞,稍有不满就乱放电电人. 小时候也想拥有一只会放电的皮卡丘,长大后渐渐明白,这种高度智能会放电的&qu ...
- 用python画皮卡丘代码-实现童年宝可梦,教你用Python画一只属于自己的皮卡丘
大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模样吗? 最近上映的<大侦探皮卡丘>,是否会让你秒回童年 ...
- 用python画皮卡丘-教你用Python画一只属于自己的皮卡丘
还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗?还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模样吗? 最近上映的<大侦探皮卡丘>,是否会让你秒回童年,进入那个充满神奇宝贝的世界,和小智一 ...
最新文章
- 高通首次推出AI引擎 打包所有软硬件算力
- abap 常用系统变量
- 【week3】psp (技术随笔)
- OMG Network与安全多方计算提供商Enya达成合作
- 工作开不开心,都在钱上
- django-debug-toolbar 工具
- windows下mysql+apache+php配置
- CharSequence接口
- 最强MySQL笔记(超详细版)(一)
- 如何备份博客:利用博客备份工具BlogDown
- SQL Server 2008 R2安装步骤示例
- postgresql下载linux版本
- 财经管理中的计算机应用内容,财大 财经管理中的计算机应用
- 多目标优化问题和遗传算法学习笔记
- python爬取墨迹天气的8月份的温度情况并发送到邮箱
- dsp广告和信息流广告区别_信息流广告和dsp的区别在哪?
- 【算法基础】DP第一弹 —— 线性DP 区间DP
- linux 设置开机自启动 文件配置开机自启动命令
- c语言程序 蟠桃记,蟠桃记
- OPC UA - Open62541学习
热门文章
- 不想周末被工作提醒打扰?你需要这个手机便签消息免打扰设置
- oracle基本参数调整优化
- 收藏.IBM.某高手点评IBM历年试题
- C# vb .net实现玻璃桌子效果滤镜
- 一曲罢已,愁若梨花,乱红释怀,浮躁尽然。。。。。。
- 大型情感连续剧,从焫鷄到咸鱼
- 新南威尔士大学纯硅量子计算机,重磅!!新南威尔士大学澳洲工程学院到访
- 农村信用社招聘计算机类进去干啥,2008年山东农村信用社招聘考试计算机类的范围有知道的吗?...
- 第一类和第二类曲面积分的转换
- 利用VBA在EXCEL 获取网页上的天气