html弹跳特效,有趣的纯CSS3弹性卡通小怪物弹跳动画特效

这是一款使用纯CSS3制作的非常有趣的卡通小怪物弹跳动画特效。该CSS3特效中有三个卡通小怪物，它们在不停的上下弹跳，并且各自的身体也带有一些弹性效果。

使用方法

HTML结构

每一个卡通小怪物的HTML结构都基本相似，使用嵌套

来构成怪物的身体。例如蓝色怪物的HTML结构为：

CSS样式

所有的小怪物都会执行一个bounce帧动画，该动画用于制作小怪物身体的弹性动画效果。

.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;

}

@keyframes bounce {

0% {

bottom: 0;

}

65% {

bottom: 8px;

}

100% {

bottom: 0;

border-radius: 49% 47% 42% 40%/60% 60% 40% 40%;

}

}

arm-bounce帧动画用于怪物手臂的缩放动画效果。mounth帧动画是怪物的嘴巴动画效果。还有一个shadow帧动画的怪物的阴影动画效果。

@keyframes arm-bounce {

0%, 100% {

bottom: 28px;

}

33% {

bottom: 23px;

}

40% {

-webkit-transform: scale(0.8);

transform: scale(0.8);

}

66% {

-webkit-transform: scale(1);

transform: scale(1);

}

}

@keyframes mounth {

0%, 100% {

height: 4px;

border-radius: 50% 50% 100% 100%;

}

50% {

height: 8px;

bottom: 17px;

border-radius: 30% 30% 100% 100%;

}

}

@keyframes shadow {

0%, 100% {

-webkit-transform: scaleX(1);

transform: scaleX(1);

}

50% {

-webkit-transform: scaleX(0.9);

transform: scaleX(0.9);

}

}

完整的样式代码请参考下载文件。