<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>H5 会动的皮卡丘动画</title>
</head>
<body>
<!--视图框-->
<div id="view"><!--皮卡丘--><div id="pikachu"><!--尾巴--><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><!--头结束--></div><!--皮卡丘结束-->
</div>
<!--视图框结束-->
<style type="text/css">
body {margin: 0;overflow: hidden;
}
#view {width: 500px;height: 500px;margin: 0px auto 0px auto;background: ;position: relative;
}
/*头*/
#head {width: 160px;height: 175px;margin: auto;background: #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: #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;background-color: #ffe100;border-radius: 100px 0px;border: 4px solid #000;position: absolute;left: 300px;
}
/*右耳朵*/
.ear_right {width: 100px;height: 100px;background-color: #ffe100;border-radius: 0px 100px;border: 4px solid #000;position: absolute;left: 100px;
}
/*右耳朵黑色阴影*/
.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 {width: 45px;height: 45px;background-color: #ff2200;border-radius: 50%;margin-top: 100px;float: left;overflow: hidden;border: 2px solid #000;
}
/*右脸蛋*/
.face_right {width: 45px;height: 45px;background-color: #ff2200;border-radius: 50%;margin-top: 100px;float: right;overflow: hidden;border: 2px solid #000;
}
/*右眼睛*/
.eye_right {width: 30px;height: 30px;background-color: #000;border-radius: 50%;position: absolute;left: 20px;top: 60px;overflow: hidden;
}
/*右眼白*/
.eye_shading_right {width: 15px;height: 15px;background-color: #fff;border-radius: 50%;position: absolute;left: 11px;
}
/*左眼睛*/
.eye_left {width: 30px;height: 30px;background-color: #000;border-radius: 50%;position: absolute;left: 110px;top: 60px;overflow: hidden;
}
/*左眼白*/
.eye_shading_left {width: 15px;height: 15px;background-color: #fff;border-radius: 50%;position: absolute;left: 5px;
}
/*鼻子*/
.nose {width: 15px;height: 10px;background-color: #000;border-radius: 50%;left: 73px;top: 88px;position: absolute;overflow: hidden;
}
/*嘴巴右*/
.mouth_right {width: 35px;height: 30px;background: #ffe100;position: absolute;top: 67px;left: 72px;border-radius: 50%;border: 3px solid #ffe100;border-bottom-color: #000;
}
/*嘴巴左*/
.mouth_left {width: 35px;height: 30px;background: #ffe100;position: absolute;top: 67px;left: 47px;border-radius: 50%;border: 3px solid #ffe100;border-bottom-color: #000;
}
/*舌头*/
.tongue {width: 23px;height: 3px;background: #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;-webkit-animation: tongue 1s ease-in-out infinite;animation: tongue 1s ease-in-out infinite;
}
/*左胳膊*/
.arm_left {width: 50px;height: 65px;background: #ffe100;position: absolute;top: 50px;left: 20px;border-bottom-left-radius: 40% 90%;border-bottom-right-radius: 40% 90%;border: 4px solid #000;border-top-color: #ffe100;-webkit-transform: skew(16deg);transform: skew(16deg);
}
/*右胳膊*/
.arm_right {width: 50px;height: 65px;background: #ffe100;position: absolute;top: 50px;left: 95px;border-bottom-left-radius: 40% 90%;border-bottom-right-radius: 40% 90%;border: 4px solid #000;border-top-color: #ffe100;-webkit-transform: skew(-16deg);transform: skew(-16deg);
}
/*左腿*/
.leg_left {position: absolute;width: 47px;height: 19px;border: 4px solid #000;background: #ffe100;border-radius: 80% 20% 80% 10%;top: 356px;left: 164px;
}
/*右腿*/
.leg_right {position: absolute;width: 47px;height: 19px;border: 4px solid #000;background: #ffe100;border-radius: 20% 80% 10% 80%;top: 356px;left: 293px;
}
/*尾巴上*/
.tail1 {width: 127px;height: 70px;-webkit-transform: skew(-20deg);transform: skew(-20deg);background: #ffe100;border: 4px solid #000;position: absolute;top: 100px;left: -8px;
}
/*尾巴中*/
.tail2 {width: 66px;height: 149px;-webkit-transform: skew(-20deg);transform: skew(-20deg);background: #ffe100;border: 4px solid #000;position: absolute;top: 134px;left: 96px;
}
/*尾巴下*/
.tail3 {width: 42px;height: 87px;-webkit-transform: skew(-20deg);transform: skew(-20deg);background: #ffe100;border: 4px solid #000;position: absolute;top: 235px;left: 140px;
}
/*尾巴阴影*/
.tail_shading {width: 29px;height: 183px;-webkit-transform: skew(16deg);transform: skew(16deg);background: #ffe100;position: absolute;top: 113px;left: 118px;
}
/*尾巴摇摆*/
.tail {-webkit-animation: tail 0.2s ease-in-out infinite;animation: tail 0.2s ease-in-out infinite;
}
/*吐舌头*/
@-webkit-keyframes tongue {0% {height: 3px;}30% {width: 20px;height: 36px;}100% {height: 3px;}
}
/*吐舌头*/
@keyframes tongue {0% {height: 3px;}30% {width: 20px;height: 36px;}100% {height: 3px;}
}
/*尾巴摇摆动画*/
@-webkit-keyframes tail {0% {-webkit-transform-origin: 250px 300px;-webkit-transform: rotateZ(0deg);}60% {-webkit-transform-origin: 250px 300px;-webkit-transform: rotateZ(10deg);}100% {-webkit-transform-origin: 250px 300px;-webkit-transform: rotateZ(0deg);}
}
/*尾巴摇摆动画*/
@keyframes tail {0% {transform-origin: 250px 300px;transform: rotateZ(0deg);}60% {transform-origin: 250px 300px;transform: rotateZ(10deg);}100% {transform-origin: 250px 300px;transform: rotateZ(0deg);}
}
</style>
</body>
</html>

效果图：

H5 会动的皮卡丘动画相关推荐

  1. svg css3皮卡丘动画js特效

    下载地址 svg css3皮卡丘动画特效,鼠标悬停的时候耳朵会动. dd:

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

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

  3. 纯CSS3制作皮卡丘动画壁纸

    前言 明天就放假了,趁着今晚的空挡时间来写这篇博客--这是我昨晚实现的一个简单的CSS3动画效果.话说还得缘起我逛了一下站酷网,然后不小心看到了一张皮卡丘的手机壁纸,觉得很可爱,然后觉得这种效果是可以 ...

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

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

  5. html5做一个皮卡丘,画一只会动的皮卡丘（上）

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

  6. 谁能拒绝一个会动的皮卡丘挂件

    说在前面

  7. python 实现一个皮卡丘的动画图

    大家都知道皮卡丘是贼可爱的样子,但是如何用Python来实现这样一个可爱的形象呢,来,先上效果图 实现的代码奉上: 第一个图片的代码: # coding:utf-8 import turtle as ...

  8. 不只会卖萌：皮卡丘们真的能改造你的大脑

    最近上映的<大侦探皮卡丘>,让一堆中二青年秒回小时候,回忆起当年疯狂收集神奇宝贝卡片的经历,拿着精灵球召唤小精灵的自己,还有背着家长偷看<神奇宝贝>动画片的紧张刺激~ 这款发售 ...

  9. python创建小火龙角色_当《火影忍者》遇上《宝可梦》，佐助化身小火龙，他变成了皮卡丘？...

    说起<火影忍者>这部动漫作品大家都很熟悉,其中的很多角色都是非常有个人特点的.无论是主角漩涡鸣人,还是宇智波佐助和卡卡西等角色.每个角色都有自己独特的风格,你有没有想过当<火影忍者& ...

最新文章

  1. Linux下实现多网卡绑定
  2. free 命令查看linux的内存使用情况
  3. [HDU517] 小奇的集合
  4. linux之lrzsz
  5. 在SQL Server中为什么不建议使用Not In子查询
  6. 助AI研究社群发出内建18种预先训练模型工具
  7. 自从上了 SkyWalking，睡觉真香！！来，通过 Excel 来认识神器——POI
  8. Redis集群环境下分布式锁方案-RedLock算法
  9. python调整PPT文档样式
  10. matlab中dfft,2-DFFT 该实验的目的是开发一个 2-D FFT程序包 联合开发网 - pudn.com
  11. python练习-word操作（word字体替换）
  12. python将pdf转成excel_wpspdf转换成excel Python转换PPT为PDF
  13. 中央气象台api接口
  14. 手把手教你写一个点菜系统（附源码）
  15. 【JMeter】分布式远程启动
  16. Android studio开发-单界面单机小程序
  17. 吃萝卜去口气（口臭）[转]
  18. 用Python校验下载文件的完整性（md5），游戏之类的大型文件
  19. 收集一些优秀的甲方安全开源项目
  20. 向苹果提交bug时的糟心经历

热门文章

  1. Mybatis配置注意事项
  2. 外包公司的三大弊端是什么，在此情况下还建议去外包公司吗
  3. 教你去掉 U盘写保护
  4. 【原创】更相减损术 stein算法 欧几里得算法 拓展欧几里得算法 扩展欧几里得算法 逆元的计算与筛法 解模线性方程
  5. length()与lengthb()的区别
  6. 基于LVD、贝叶斯模型算法实现的电商行业商品评论与情感分析案例
  7. 客户端在线更新-QT
  8. 宝塔Linux面板：SSH终端登入总是提示请输入password
  9. linux系统硬盘坏了,linux 系统 如何检测 磁盘 是否损坏?
  10. Unable to find script library '/aspnet_client/system-web/1-1-4322/webvalidation.js'