CSS3皮卡丘效果代码

快乐打工仔 分类:实例代码

CSS3皮卡丘效果代码属于前端实例代码,有关更多实例代码大家可以查看

本章节分享一段代码实例,它利用css3实现了皮卡丘效果。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
margin: 0;
}
#view {
width: 500px;
height: 500px;
margin: 100px 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>
</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>
<!--视图框结束-->
</body>
</html>

上面的代码实现了效果,更多内容可以参阅相关阅读。

相关阅读:

(1).border-radius参阅CSS3 border-radius一章节。

(2).transform参阅CSS3 transform一章节。

(3).@keyframes参阅CSS3 @keyframes一章节。

CSS3皮卡丘效果代码,这样的场景在实际项目中还是用的比较多的,关于CSS3皮卡丘效果代码就介绍到这了。

回复

我来回复
  • 暂无回复内容