<!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广告动画实例解析与应用》 在数字化营销领域，H5广告因其互动性强、传播范围广的特点，已经成为企业推广的重要手段。本资源“h5广告动画实例”旨在为初学者提供一个基础的H5广告开发学习平台，通过具体的案例，...
制作H5文字loading动画，一般涉及以下知识点： 1. **HTML5的新特性**：包括`<canvas>`元素，用于在浏览器中绘制图形；`<style>`标签内联样式，使得CSS更灵活；以及`<script>`标签引入JavaScript代码。 2. **CSS3...
总的来说，"H5 +Jquery 扔骰子 色子动画变化 控制点数"这个项目是一个结合了HTML5 Canvas绘图、jQuery交互以及JavaScript随机数与动画处理的实例。它展示了如何利用这些技术来创建一个富有动态效果的网页应用，对于...
在H5动画中，还可以借助像GreenSock (GSAP)、CreateJS、Pixi.js等JavaScript库，它们提供了一套完整的动画解决方案，包括时间轴管理、缓动函数、序列化等，简化了动画开发流程。 6. **物理模拟与运动路径** 部分...
《使用Swiper实现移动H5页面动画效果》 在当今数字化时代，H5技术在移动端的应用日益广泛，尤其在互动式广告、企业宣传、在线教育等领域。为了提升用户体验，动态效果和动画设计变得至关重要。本教程将围绕"手机端...
本篇文章将详细探讨如何使用纯H5来实现视频动画效果，以及这种方法的优势和应用场景。 一、HTML5 Video元素 HTML5中的`<video>`元素是实现视频播放的核心。通过这个元素，我们可以直接在网页上嵌入视频，而无需...
HTML5（H5）是现代网页...总的来说，这个“H5经典动画源代码”集合是一个丰富的学习资源，涵盖了H5动画的各个方面。深入研究这些示例，不仅可以学习到HTML5的新特性，还能掌握动画设计的技巧，提升你的前端开发能力。
H5酷炫3D开场动画（酷炫又不会占太大内存）H5酷炫3D开场动画（酷炫又不会占太大内存）
本项目“一个好看的h5场景动画”显然利用了这些技术来创建了一个吸引人的招聘微场景页面。下面我们将深入探讨这些知识点。 **HTML**（HyperText Markup Language）是网页内容的基础，它定义了网页的结构。在这个h5...
高效 H5 动画开发方式 在 H5 动画开发中，选择合适的开发方式是非常重要的。不同的开发方式各有其优缺，需要根据动画效果、动画要求等因素去衡量，选择合适的开发方式来实现动画。下面是常用的动画开发方式及其特点...
可视化H5页面与交互动画设计制作是现代网页设计中的重要组成部分，特别是在移动互联网时代，H5技术的应用广泛，能够实现跨平台、丰富的用户体验。木疙瘩（Mugeda）是一款专业的在线H5创作工具，它提供了可视化的编辑...
此外，动画的流畅性和速度也会影响用户体验，合理的帧率和适时的缓动函数可以使动画更加自然。 为了使“咖啡物语”更加生动，开发者还可以引入音频元素，如滴水声、研磨声、牛奶倒入杯中的声音等，增强用户的沉浸感...
本话题将深入探讨"H5多种加载效果loading"，即H5页面在加载过程中使用的炫酷动画，旨在提升用户在等待页面完全加载时的体验。 一、什么是H5加载效果 H5加载效果，也称为“loading”或“预加载”，是指在页面内容...
Web Animations API是W3C的一个标准，允许开发者通过JavaScript控制元素的动画效果，包括时间线、缓动函数和复杂的动画路径。 3. SVG动画：SVG（Scalable Vector Graphics）是一种矢量图形格式，支持内置的动画机制...
H5动画物理引擎主要依赖于JavaScript（JS）来实现，这是因为JavaScript是Web浏览器支持的最广泛的语言，可以实时更新页面内容。通过JavaScript库或框架，开发者可以轻松地将物理模拟集成到H5项目中。例如，著名的...
在H5设计领域，上下翻页动画是一种常见且吸引人的交互元素，特别是在制作电子年报、电子杂志或互动故事时。这种动画技术使得内容呈现更加生动有趣，为用户提供沉浸式的阅读体验。下面我们将深入探讨“h5上下翻页动画...
前端H5点击动画应考虑不同设备和屏幕尺寸，使用媒体查询（media queries）和Flexbox或Grid布局确保动画在各平台上表现良好。 8. **交互反馈**： 点击动画不仅是视觉展示，还应提供清晰的用户反馈。例如，按钮被...
使用html5+css3完成的网页设计作品