前端制作动画的几种方式（css3，js）

当今互联网时代，设计已经成为了各种网站产品的重要一环，对于前端开发者来说，开发出具有创意、充满活力的页面效果已经成为了重要的技能之一。而动画作为前端展示效果的重要手段，也成为前端无法绕过的一个环节，今天我们就来详细讲解一下“前端制作动画的几种方式（css3，js）”。

CSS3 动画制作方式

CSS3 是一个让前端设计和开发人员热爱的规范，它的出现使得网页中的动画效果真正实现了 CSS 控制和布局。CSS3提供了在页面中建立各种形状、颜色、字体、渐变、动画、转换和过渡的方式等，下面我们以一个简单的例子来说明如何使用 CSS3 制作动画。

示例：使用 CSS3 制作一个跳跃的气球动画

<div class="balloon"></div>

.balloon {
  width: 30px;
  height: 45px;
  border-radius: 20px 20px 10px 10px;
  background-color: #ff1a1a;
  position: absolute;
  bottom: -45px;
  left: 50%;
  margin-left: -15px;
  animation: jump 1s ease-in-out infinite;
}

@keyframes jump {
  0% {
    transform: translateY(0) scale(1, 1);
  }
  25% {
    transform: translateY(-30px) scale(1.1, 0.9);
  }
  50% {
    transform: translateY(0) scale(1, 1);
  }
  75% {
    transform: translateY(-15px) scale(0.9, 1.1);
  }
  100% {
    transform: translateY(0) scale(1, 1);
  }
}

上述代码中，我们创建了一个 div 元素并给它加上一个名为 balloon 的类。通过定义 .balloon 类的样式，我们定义了气球的样子。然后我们使用 @keyframes 定义了一个名叫 jump 的动画，该动画定义了气球的跳跃方式。最后通过在 .balloon 类中使用 animation 属性就可以实现跳跃的气球动画效果了。

JavaScript 动画制作方式

在前端界面设计中，JavaScript 动画一般通过修改元素的位置或样式来实现。JavaScript 动画要比 CSS3 动画更加灵活，可以在页面中制作出更加精致的动画效果，下面我们以一个简单的例子来说明如何使用 JavaScript 制作动画。

示例：使用 JavaScript 制作一个钟表动画

<div id="clock">
  <div id="hour"></div>
  <div id="minute"></div>
  <div id="second"></div>
</div>

#clock {
  width: 100px;
  height: 100px;
  border-radius: 50px;
  border: solid 4px #333;
  position: relative;
}

#hour, #minute, #second {
  position: absolute;
  width: 0;
  height: 0;
}

#hour {
  top: 20%;
  left: 50%;
  margin-left: -5px;
  border-top: solid 20px red;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 5px transparent;
  transform-origin: bottom;
}

#minute {
  top: 15%;
  left: 50%;
  margin-left: -3px;
  border-top: solid 30px #333;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 5px transparent;
  transform-origin: bottom;
}

#second {
  top: 10%;
  left: 50%;
  margin-left: -1px;
  border-top: solid 40px #333;
  border-right: solid 5px transparent;
  border-bottom: solid 5px transparent;
  border-left: solid 5px transparent;
  transform-origin: bottom;
}

setInterval(function(){
  var time = new Date();
  var hour = time.getHours();
  var minute = time.getMinutes();
  var second = time.getSeconds();

  var hourDeg = (hour * 30 + minute * 0.5) % 360;
  var minDeg = minute * 6;
  var secDeg = second * 6;

  document.getElementById("hour").style.transform = "rotate("+hourDeg+"deg)";
  document.getElementById("minute").style.transform = "rotate("+minDeg+"deg)";
  document.getElementById("second").style.transform = "rotate("+secDeg+"deg)";
}, 1000);

上述代码中，我们创建了一个 div 元素并给它赋一个 id 为 clock。在 clock 元素内部又创建了三个 div 元素，分别赋予了 id 为 hour、minute、second。然后我们通过 CSS3 的方式设置了钟表表盘和表针的样式。最后通过 JavaScript 定义了 setInterval 函数来实现钟表的动态效果。在 setInterval 函数中获取了当前本地的时间，根据小时、分钟和秒数计算出了对应的时钟角度，并修改了 hour、minute、second 元素的 transform 属性来实现了钟表的动画效果。

除了上述示例之外，还有很多其他的前端制作动画方式，如使用 SVG、Canvas、Three.js 等。尝试多种方法，从中挑选适合自己的方式，可以让你在前端展示效果中更加得心应手。