周末闲来无事，做了一个能动的宣传页

最近在用可画（canva），制作一些素材，海报活动页面，这不情人节快到了吗？基于海报模版，设计自己的页面倒是简单，但是都是静态页面，想着能不能让页面的元素都动起来（Everybody跟我一起嗨嗨嗨!!）。

两个方案

纯CSS animate库

CSS基于animate库

JS animejs库

animejs库

使用JS的关键就是编写对应帧属性，通过时间轴timeline方法给元素加上动画。现在js版本还只是一个demo中的demo，下次再给jym，感兴趣的jy可以自己想想。

时间轴可让你将多个动画同步在一起。
默认情况下，添加到时间轴的每个动画都会在上一个动画结束时开始。

<div class="demo-content params-inheritance-demo">
    <div class="line">
      <div class="square shadow"></div>
      <div class="square el" style="transform: translateX(0px) scale(1); opacity: 0.5;"></div>
    </div>
    <div class="line">
      <div class="circle shadow"></div>
      <div class="circle el" style="transform: translateX(7.22878e-10px) scale(1); opacity: 0.5;"></div>
    </div>
    <div class="line">
      <div class="triangle shadow"></div>
      <div class="triangle el" style="transform: translateX(2.30924px) scale(1.00924) rotate(180deg); opacity: 0.5;"></div>
    </div>
  </div>

<script src="https://lib.baomitu.com/animejs/3.2.1/anime.min.js"></script>

.demo-content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  width: 290px;
  height: 100%;
}
.line {
  width: 100%;
  padding: 1px 0px;
}
.square,
.circle {
  pointer-events: none;
  position: relative;
  width: 28px;
  height: 28px;
  margin: 1px;
  background-color: #005bb7;
  font-size: 14px;
}
.triangle {
  pointer-events: none;
  position: relative;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 14px 24px 14px;
  border-color: transparent transparent #005bb7 transparent;
}
.shadow {
  position: absolute;
  opacity: .2;
}

var tl = anime.timeline({
  targets: '.params-inheritance-demo .el',
  delay: function(el, i) { return i * 200 },
  duration: 500,
  easing: 'easeOutExpo',
  direction: 'alternate',
  loop: true
});

tl
.add({
  translateX: 250,
  // override the easing parameter
  easing: 'spring',
})
.add({
  opacity: .5,
  scale: 2
})
.add({
  // override the targets parameter
  targets: '.params-inheritance-demo .el.triangle',
  rotate: 180
})
.add({
  translateX: 0,
  scale: 1
});