CSS3跳跃的卡通人物动画特效演示及代码下载
发布时间：2016-01-10 10:49 来源：IT技术网
CSS代码除了可以任意改变我们的网页布局以及网页内容的样式外，CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动。使用CSS3 制作的动画效果更是出众，给人很好的前端体验，本篇itjs.cn介绍的是CSS3卡通人物动画效果，跃动的卡通人物非常可爱哦。
CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation;它们对元素实现了一些基本的动画效果。在本例中的部分CSS3代码研究如下：
.item {
width: 200px;
height: 200px;
bottom: 70px;
left: 50%;
margin-left: -50px;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
}
.item .chewing {
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%;
-webkit-animation: bounce 0.6s ease-in-out infinite;
animation: bounce 0.6s ease-in-out infinite;
}
.item .chewing .arm.left {
left: -13px;
-webkit-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.item .chewing .arm.right {
right: -13px;
-webkit-transform: rotate(20deg);
transform: rotate(20deg);
}
.item .shadow {
width: 70px;
height: 10px;
bottom: -10px;
left: 0;
right: 0;
margin: auto;
border-radius: 50%;
background: #37a45b;
box-shadow: 0 0 5px #37a45b;
-webkit-animation: shadow 0.7s ease-in-out infinite;
animation: shadow 0.7s ease-in-out infinite;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}
大家自己下载源码仔细学习研究吧，我们还会分享更多经典的CSS3动画特效实例，以及CSS3动画教程类的问题，请继续关注itjs.cn，我们用严谨的态度，奉献高质量的IT技术类资源。
