由爱生变，爱情的力量令人着迷

纯CSS实现，像极了爱情

爱，是世界上最奇妙、最不可思议的力量。它可以让人们做任何事情，无论是好的，还是坏的。它可以让人们变得更好，也可以让人们变得更糟。爱情的力量不可小觑。

最近突然回想到之前看过的一个动画，是一个正方体向球体表示爱意，被拒绝，改变自己的小动画。

动画中存在镜头转换，所以我们需要一个导演把控全局，写个简单效果进行测试。

/* 导演 */
@keyframes camera-move {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.camera {
  animation: camera-move 1s linear infinite;
}

测试完成。

猪脚 cube 登场，龙套们退场。

/* 猪脚 */
.cube {
  width: 100px;
  height: 100px;
  background-color: red;
}

/* 龙套 */
.sphere {
  width: 50px;
  height: 50px;
  background-color: blue;
  border-radius: 50%;
}

/* 猪脚登场，龙套退场 */
.stage {
  position: relative;
  width: 200px;
  height: 200px;
}

.cube,
.sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.sphere {
  display: none;
}

这样猪脚看起来还是眉清目秀的。

为了表达对球体的爱意，正方体开始改变自己的形状，试图变得更像球体。

/* 猪脚开始变形 */
.cube {
  animation: transform 1s linear infinite;
}

@keyframes transform {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(180deg);
  }
}

球体被正方体的改变所感动，也开始改变自己的形状，试图变得更像正方体。

/* 球体开始变形 */
.sphere {
  animation: transform 1s linear infinite;
}

@keyframes transform {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  25% {
    transform: translate(-50%, -50%) scale(0.9);
  }
  50% {
    transform: translate(-50%, -50%) scale(0.8);
  }
  75% {
    transform: translate(-50%, -50%) scale(0.7);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.6);
  }
}

最后，正方体和球体终于走到了一起，它们融合在了一起，成为了一个全新的形状。

/* 正方体和球体融合 */
.cube,
.sphere {
  animation: merge 1s linear infinite;
}

@keyframes merge {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  25% {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(90deg);
  }
  75% {
    transform: translate(-50%, -50%) rotate(135deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(180deg);
    border-radius: 50%;
  }
}

这是一个简单的动画，但它却表达了爱情的伟大力量。爱情可以改变一切，它可以让人们变得更好，也可以让人们走到一起。