H5 会动的皮卡丘动画

onestopweb

浏览: 652761 次

最近访客更多访客>>

heishehui

wtomato

hushouhao

wmysbbs

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

境-H5

动画 CSS3动画 h5皮卡丘会动的皮卡丘

<!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>

效果图：

demo.rar (1.6 KB)
下载次数: 0

查看图片附件

分享到：

JQ 日期联动插件 | JQ 表单验证

2017-03-25 17:44
浏览 702
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5 会动的皮卡丘动画

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

H5 会动的皮卡丘动画

评论

发表评论

相关推荐

H5 新增元素和弃用元素

H5 仿阿里自适应页面

H5 文字loading动画

H5 CSS3环形动画

H5 页面整体变灰色的的代码

CSS3 发光边框

CSS3 3D翻转卡片动画

H5 仿Bootstrap表单输入框焦点高光

H5 CSS3 @keyframes 文字一闪一闪提示

H5 粘住底部的办法

H5 IE9及以下版本兼容h5新标签

H5 CSS hack 和浏览器内核

H5 CSS3 渐变的使用

H5 输入框的提示信息

H5 标签的对应英文和说明

H5 头部标签和meta

H5 公共样式2.0版本

CSS3 选择器的概括说明

CSS3 px 和 em 和 rem

CSS 选择器参考手册

最近访客更多访客>>