CSS3 画皮卡丘
2024-06-12 15:48:46
前面的话
周末放松放松，刚好看到知乎上面的小demo——css画皮卡丘，挺可爱的，练练手。同时也分享给大家
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;}body {overflow: hidden;}#view {width: 500px;height: 500px;margin: 0px auto;position: relative;}/* 头 */#head {width: 160px;height: 175px;margin: auto;background-color: #ffe100;position:absolute;top: 10%;left: 35%;border-top-left-radius: 45% 43%;border-top-right-radius: 45% 43%;border-bottom-left-radius: 50% 35%;border-bottom-right-radius: 50% 35%;border: 4px solid #000;border-bottom-color: #ffe100;}#body {width: 170px;height: 185px;background-color: #ffe100;position: absolute;top: 38%;left: 34%;border-bottom-left-radius: 45% 43%;border-bottom-right-radius: 45% 43%;border-top-left-radius: 30% 90%;border-top-right-radius: 30% 90%;border: 4px solid #000;}.ear_left {width: 100px;height: 100px;position: absolute;left: 300px;background-color: #ffe100;border-radius: 100px 0px;border: 4px solid #000;}.ear_right {width: 100px;height: 100px;position: absolute;left: 100px;background-color: #ffe100;border-radius: 0px 100px;border: 4px solid #000;}/* 右耳朵黑色阴影 */.ear_shading_right {width: 38px;height: 77px;background-color: #000;border-radius: 14% 0% 100% 0%;position:absolute;left: 370px;top: 3px;}/* 右耳朵黑色阴影 */.ear_shading_left{width: 38px;height: 77px;background-color: #000;border-radius: 0% 14% 0% 100%;position:absolute;left: 100px;top: 3px;}/* 左脸蛋 */.face_left ,.face_right{width: 45px;height: 45px;background-color: #ff2200;border-radius: 50%;margin-top: 100px;border: 2px solid #000;}.face_left {float: left;}.face_right {float: right;}/* 眼睛 */.eye_right,.eye_left {width: 30px;height: 30px;background-color: #000;border-radius: 50%;position: absolute;left: 110px;top: 60px;}.eye_left {left: 20px;top: 60px;}/* 眼白 */.eye_shading_right,.eye_shading_left {width: 15px;height: 15px;background-color: #fff;border-radius: 50%;position: absolute;left: 11px;}.eye_shading_right {left: 5px;}/* 鼻子 */.nose {width: 15px;height: 10px;background-color: #000;border-radius: 50%;position: absolute;left: 73px;top: 88px;}/* 嘴巴 */.mouth_right,.mouth_left {width: 35px;height: 30px;background-color: #ffe100;position: absolute;top: 67px;left: 72px;border-radius: 50%;border: 3px solid #ffe100;border-bottom-color: #000;}.mouth_left {left:47px;}/* 舌头 */.tongue {width: 23px;height: 3px;background-color: #ff2200;position: absolute;top: 102px;left: 66px;border-bottom-left-radius: 40% 90%;border-bottom-right-radius: 40% 90%;border: 3px solid #000;border-top-color: #ffe100;animation: tongue 1s ease-in-out infinite;}/* 胳膊 */.arm_left ,.arm_right{width: 50px;height: 65px;background-color: #ffe100;position: absolute;top: 50px;left: 20px;border: 4px solid #000;border-bottom-left-radius: 40% 90%;border-bottom-right-radius: 40% 90%;border-top-color: #ffe100;transform: skew(16deg)}.arm_right {left: 95px;transform: skew(-16deg)}/* 腿 */.leg_left,.leg_right {width: 47px;height: 19px;border: 4px solid #000;background-color: #ffe100;position: absolute;border-radius: 80% 20% 80% 10%;top: 356px;left: 164px;}.leg_right {border-radius:20% 80% 10% 80%;left: 293px;}/* 尾巴 */.tail1 {width: 127px;height: 70px;background-color: #ffe100;border: 4px solid #000;position: absolute;top: 100px;left: -8px;transform: skew(-20deg)}.tail2 {width: 66px;height: 149px;background-color: #ffe100;border: 4px solid #000;position: absolute;top: 134px;left: 96px;transform: skew(-20deg)}.tail3 {width: 42px;height: 87px;background-color: #ffe100;border: 4px solid #000;position: absolute;top: 235px;left: 140px;transform: skew(-20deg)}/* 尾巴阴影 */.tail_shading {width: 29px;height: 183px;background-color: #ffe100;position: absolute;top: 113px;left: 118px;transform: skew(16deg);}/* 尾巴摇摆*/.tail {animation: tail 0.4s ease-in-out infinite;}/* 吐舌头动画 */@keyframes tongue {0% {height: 3px;}30% {width: 20px;height: 32px;}100% {height: 3px;}}/* 尾巴摇摆动画 */@keyframes tail {0% {transform-origin: 250px 250px;transform: rotateZ(0deg);}60% {transform-origin: 250px 300px;transform: rotateZ(10deg);}100% {transform-origin: 250px 300px;transform: rotateZ(0deg);}}</style>
</head>
<body><div id="view"><div id="pika"><!-- 尾巴 --><div class="tail"><div class="tail3"></div><div class="tail2"></div><div class="tail1"></div><div class="tail_shading"></div></div><!-- 尾巴结束 --><!-- 耳朵 --><div class="ear"><div class="ear_left"></div><div class="ear_right"></div><div class="ear_shading_left"></div><div class="ear_shading_right"></div></div><!-- 耳朵结束 --><!-- 腿 --><div class="leg"><div class="leg_left"></div><div class="leg_right"></div></div><!-- 腿结束 --><!-- 身体 --><div id="body"><div class="arm_left"></div><div class="arm_right"></div></div><!-- 身体结束 --><!-- 头 --><div id="head"><!-- 脸蛋 --><div class="face_left"></div><div class="face_right"></div><!-- 眼睛 --><div class="eye_left"><!-- 眼白 --><div class="eye_shading_left"></div></div><div class="eye_right"><!-- 眼白 --><div class="eye_shading_right"></div></div><!-- 眼睛结束 --><!-- 嘴巴 --><div class="mouth_left"></div><div class="mouth_right"></div><!-- 舌头 --><div class="tongue"></div><!-- 鼻子 --><div class="nose"></div></div><!-- 头结束 --></div><!-- pika结束 --></div></body>
</html>
CSS3 画皮卡丘相关推荐
- python画皮卡丘
可以看下面的正文注释 这是一个画皮卡丘的代码,用turtle库弄的. import turtle def getPosition(x, y): turtle.setx(x) turtl ...
- python的皮卡丘如何写代码,用python画皮卡丘的代码
python皮卡丘编程代码 import turtledef getPosition(x, y): (x) (y) print(x, y)class Pikachu: def __init__(sel ...
- Python -- 大作业 — 使用turtle库画皮卡丘
使用python的turtle库画皮卡丘 一.使用环境 在这里,我使用的是python 3.8.5版本的IDLE(也可以使用其他3.0以上版本,PyCharm也是可以的). 二.内容介绍 1.主要方法 ...
- 怎么用python画一个皮卡丘,用python画皮卡丘的代码
python皮卡丘编程代码 import turtledef getPosition(x, y): (x) (y) print(x, y)class Pikachu: def __init__(sel ...
- python皮卡丘字符打印代码,python画皮卡丘的代码
大家好,本文将围绕用python画一只可爱的皮卡丘展开说明,python皮卡丘字符打印代码是一个很多人都想弄明白的事情,想搞清楚python皮卡丘编程代码教程需要先了解以下几个事情. 1.python ...
- 用python画皮卡丘源代码-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
- python简单代码画皮卡丘-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘...
原标题:实现童年宝可梦,教你用Python画一只属于自己的皮卡丘 大数据文摘出品 作者:李雷.蒋宝尚 还记得小时候疯狂收集和交换神奇宝贝卡片的经历吗? 还记得和小伙伴拿着精灵球,一起召唤小精灵的中二模 ...
- 用python画皮卡丘画法-实现童年宝可梦，教你用Python画一只属于自己的皮卡丘
皮卡丘脸颊两边有着小小的电力袋,因此他独有的能力就是可以放电.在动画片中,小智的皮卡丘性格十分害羞,稍有不满就乱放电电人. 小时候也想拥有一只会放电的皮卡丘,长大后渐渐明白,这种高度智能会放电的&qu ...
- 用python画皮卡丘代码-用python绘制皮卡丘
科普:皮卡丘是日本任天堂公司开发的掌机游戏系列<口袋妖怪>中登场精灵中的一种,为口袋妖怪里代表性的角色. 随着其周边动画宠物小精灵(即神奇宝贝)动画的热播,这只神奇宝贝的魅力逐渐开始被低年 ...
最新文章
- aws lambda使用_使用AWS Lambda安排Slack消息
- linux c 获取目录文件列表
- 帝国cms后台编辑时日期显示保存使用时间戳的方法
- vmware上给根分区增加空间以及创建逻辑卷
- Android5.0源码分析—— Zygote进程分析
- 操作系统 课堂练习题02【8道 经典题目】
- 调用startactivityforresult后，onactivityresult立刻返回RESULT_CANCELED
- 复选框(checkbox)、单选框（radiobox）的使用
- 如何安装TrueNAS
- Discuz!NT CreditsOperationType
- SQL SERVER2008查询分析器的基本使用
- webservice用完关闭连接_基于JavaEE平台实战WebService框架Xfire+Ajax框架DWR(租房网项目实战)...
- PMI采购MogaFX经理人指数是什么（二)
- Chrome浏览器取色器
- CSMA/CD与CSMA/CA的区别
- 实用计算机基础,计算机基础知识考题5[实用].pdf
- Spring Kafka消费模式（single, batch）及确认模式（自动、手动）示例
- TX2 用文件IO的方式操作GPIO
- 关于Python控制打印机如何横向打印EXEL
- C++ bind浅析