打造「京喜工厂」CSS动画，妙趣横生的交互之旅

前端

2023-09-07 00:31:49

在今年Q1（2020年第一季度），我参与了京喜事业部「京喜工厂」业务的前端开发。这是一款颇具趣味性的H5游戏，用户可以参与口罩、抽纸、大米等商品的“在线生产”，既能体验趣味造物，又能免费领奖品。目前可以通过「京喜」小程序首页访问该活动。

活动上线后，在短短一个月内，PV达到千万的量级，引人注目。不少前端同学对其中的CSS动画效果表示好奇，希望能够学习实现。因此，我决定撰写这篇教程，手把手教你实现「京喜工厂」的CSS动画效果，让你也能打造妙趣横生的交互体验。

1. 了解CSS动画基础

在开始之前，我们先来了解一下CSS动画的基础知识。CSS动画是一种利用CSS属性的变化来创建动画效果的技术，它可以通过改变元素的位置、颜色、透明度等属性来实现各种动画效果。

CSS动画的实现方法主要有两种：

过渡动画（Transitions）： 过渡动画是一种简单易用的动画效果，它可以实现元素从一种状态到另一种状态的平滑过渡。
关键帧动画（Keyframe Animations）： 关键帧动画是一种更强大的动画效果，它可以实现更复杂的动画效果，例如旋转、缩放、位移等。

2. 实现「京喜工厂」的CSS动画效果

接下来，我们来实现「京喜工厂」中的几个典型CSS动画效果。

2.1 生产线上的商品移动动画

首先，我们来看看生产线上的商品移动动画。这个动画效果使用了关键帧动画实现，动画过程如下：

商品从生产线的一端移动到另一端；
移动过程中，商品会旋转；
商品移动到另一端后，会消失。

具体实现代码如下：

/* 商品移动动画 */
.product-item {
  animation: product-move 2s infinite linear;
}

@keyframes product-move {
  0% {
    transform: translateX(0) rotate(0deg);
  }
  50% {
    transform: translateX(100%) rotate(360deg);
  }
  100% {
    transform: translateX(200%) rotate(720deg);
    display: none;
  }
}

2.2 按钮的点击反馈动画

接下来，我们来看看按钮的点击反馈动画。这个动画效果使用了过渡动画实现，动画过程如下：

按钮在被点击时，会缩小；
缩小后，按钮会恢复原状。

具体实现代码如下：

/* 按钮点击反馈动画 */
.button {
  transition: transform 0.2s ease-in-out;
}

.button:active {
  transform: scale(0.9);
}

2.3 奖品的领取动画

最后，我们来看看奖品的领取动画。这个动画效果使用了关键帧动画实现，动画过程如下：

奖品从屏幕底部升起；
升起过程中，奖品会旋转；
奖品升到屏幕中央后，会放大；
放大后，奖品会停留一段时间；
停留一段时间后，奖品会消失。

具体实现代码如下：

/* 奖品领取动画 */
.prize {
  animation: prize-get 2s infinite linear;
}

@keyframes prize-get {
  0% {
    transform: translateY(100%) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0) rotate(360deg);
    opacity: 1;
  }
  75% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}