当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(5) 评论(0)

简介

#####  HTML结构
每一个卡通小怪物的HTML结构都基本相似，使用嵌套<div>来构成怪物的身体。例如蓝色怪物的HTML结构为：

```html
<div class="item" id="blue">
  <div class="chewing">
    <div class="eye left"><span></span></div>
    <div class="eye right"><span></span></div>
    <div class="mounth"></div>
    <div class="arm left"></div>
    <div class="arm right"></div>
  </div>
  <div class="shadow"></div>
</div>  
```              
#####  CSS样式
所有的小怪物都会执行一个bounce帧动画，该动画用于制作小怪物身体的弹性动画效果。

```html
.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帧动画的怪物的阴影动画效果。

```html
@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);
  }
}        
```

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果