CSS3卡通形象代码实例
分类：实例代码
CSS3卡通形象代码实例属于前端实例代码，有关更多实例代码大家可以查看。
分享一段代码实例，它利用css3实现了卡通形象效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>前端教程网</title>
<style>
body {
background: #3cb464;
}
.container {
position: absolute;
width: 800px;
height: 400px;
top: 20%;
left: 50%;
transform: translate(-50%,-50%);
}
.container div, .container span {
position: absolute;
}
.intem {
width: 200px;
height: 200px;
bottom: 70px;
left: 50%;
margin-left: -50px;
transform-origin: center bottom;
}
.container .wrap {
width: 100px;
height: 100px;
bottom: 0;
left: 50%;
margin-left: -50px;
box-shadow: inset 10px -6px 10px rgba(0, 0, 0, 0.1);
border-radius: 50% 50% 50% 50%/60% 60% 40% 40%;
animation: qiu 0.6s ease-in-out infinite;
}
.intem .wrap .eye {
background: #fff;
border-radius: 50%;
border-top: 2px solid #111;
}
.intem .wrap .eye span {
width: 8px;
height: 8px;
border-radius: 4px;
background: #232323;
}
.intem .wrap .eye.left {
top: 30px;
left: 30px;
width: 30px;
height: 29px;
transform: rotate(-10deg);
}
.intem .wrap .eye.left span {
top: 12px;
height: 9px;
left: 12px;
}
.intem .wrap .eye.right {
top: 35px;
right: 20px;
width: 20px;
height: 20px;
transform: rotate(10deg);
}
.container .wrap .eye.right span {
top: 9px;
left: 7px;
}
.intem .wrap .mouth {
width: 16px;
height: 4px;
bottom: 20px;
background: #fff;
border-radius: 60% 80% 50% 100%;
left: 50px;
}
.intem .wrap .arm {
width: 15px;
height: 16px;
bottom: 28px;
border-radius: 7px;
z-index: -1;
animation: arm 0.7s ease-in-out infinite;
}
.intem .wrap .arm.left {
left: -13px;
transform: rotate(-20deg);
}
.intem .wrap .arm.right {
right: -13px;
transform: rotate(20deg);
}
.container .shadow {
width: 70px;
height: 10px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
background: #37a45b;
box-shadow: 0 0 5px #37a45b;
animation: shadow 0.7s ease-in-out infinite;
animation-delay: 0.3s;
}
.intem#pink {
left: 33%;
z-index: 30;
}
.intem#pink .wrap {
background: pink;
}
.intem#pink .mouth {
left: 43px;
animation: mounth 0.7s ease-in-out infinite;
}
.intem#pink .arm {
background: pink;
}
.intem#green {
left: 58%;
z-index: 20;
transform: scale(1.1);
}
.intem#green .wrap {
background: greenyellow;
animation-delay: 0.2s;
}
.intem#green .mouth {
left: 50px;
height: 15px;
width: 40px;
transform: rotate(2deg);
animation: mounth 0.7s ease-in-out infinite;
}
.intem#green .arm {
background: greenyellow;
}
.intem#yellow {
left: 80%;
z-index: 20;
transform: scale(0.8);
}
.intem#yellow .wrap {
background: paleturquoise;
animation-delay: 0.4s;
}
.intem#yellow .mouth {
left: 50px;
width: 20px;
height: 5px;
transform: rotate(5deg);
animation: mounth 0.7s ease-in-out infinite;
}
.intem#yellow .arm {
background: paleturquoise;
}
@keyframes qiu {
0% {
bottom: 0;
}
20% {
bottom: 8px;
}
40% {
bottom: 14px;
}
60% {
bottom: 16px;
}
80% {
bottom: 24px;
}
100% {
bottom: 0;
border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;
}
}
@keyframes arm {
0%,100% {
bottom: 28px;
}
33% {
bottom: 23px;
}
40% {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
66% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
@keyframes shadow {
0%,100% {
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
50% {
-webkit-transform: scaleX(0.8);
transform: scaleX(0.8);
}
}
@keyframes mounth {
0%,100% {
height: 15px;
width: 20px;
border-radius: 50% 66% 50% 50%;
}
50% {
height: 16px;
bottom: 20px;
border-radius: 100% 50% 100% 50%;
}
}
</style>
</head>
<body>
<div class="container">
<div class="intem" id="pink">
<div class="wrap">
<div class="left eye"><span></span></div>
<div class="right eye"><span></span></div>
<div class="mouth"></div>
<div class="arm left"></div>
<div class="arm right"></div>
</div>
<div class="shadow"></div>
</div>
<div class="intem" id="green">
<div class="wrap">
<div class="left eye"><span></span></div>
<div class="right eye"><span></span></div>
<div class="mouth"></div>
<div class="arm left"></div>
<div class="arm right"></div>
</div>
<div class="shadow"></div>
</div>
<div class="intem" id="yellow">
<div class="wrap">
<div class="left eye"><span></span></div>
<div class="right eye"><span></span></div>
<div class="mouth"></div>
<div class="arm left"></div>
<div class="arm right"></div>
</div>
<div class="shadow"></div>
</div>
</div>
</body>
</html>
上面的代码实现了我们的要求，更多内容可以参阅相关阅读。
相关阅读：
（1）.position属性参阅css position定位详解一章节。
（2）.transform: translate()参阅transform: translate()用法介绍一章节。
（3）.transform-origin参阅CSS3 transform-origin一章节。
（4）.box-shadow参阅box-shadow一章节。
（5）.border-radius参阅CSS3 border-radius一章节。
（6）.animation参阅CSS3 animation一章节。
（7）.transform: rotate()参阅transform: rotate()用法介绍一章节。
（8）.animation-delay参阅CSS3 animation-delay一章节。
（9）.transform: scale()参阅transform: scale()用法介绍一章节。
（10）.@keyframes参阅CSS3 @keyframes一章节。
CSS3卡通形象代码实例，这样的场景在实际项目中还是用的比较多的，关于CSS3卡通形象代码实例就介绍到这了。