css3 实现礼品获取光晕效果

需求效果：

实现思路：

1.星星的动画，其中每个星星为一个dom元素,然后设置相应的动画：

html代码：

<div class="star star1"></div>
复制代码

css代码：

.popup-board.animate .star1 {
  animation: star-move1 1.5s .1s infinite cubic-bezier(0.25,0.1,0.25,0.25);
}

@keyframes star-move1
{
  0% {
    transform: rotate(0deg) scale(1);
    opacity: 1;
  }
  85% {
    transform: translate(-110px, -110px) rotate(153deg) scale(0.75);
    opacity: 0.7;
  }
  100% {
    transform: translate(-120px, -120px) rotate(180deg) scale(0.4);
    opacity: 0;
  }
}
复制代码

在动画过程中，如果去掉85%帧动画的会导致这个星星在动画过程中透明度太低，导致星星太暗，效果不好。但是在加入85%帧的动画情况下使用常用的 animation-timing-function: ease|ease-in 会导致85%到100%的动画衔接不流畅，所以将的 animation-timing-function 设置为 cubic-bezier(0.25,0.1,0.25,0.25)。 关于cubic-bezier函数的原理可以参考：实用的 CSS — 贝塞尔曲线(cubic-bezier)

####2.光晕效果

<div class="circle circle1"></div>
复制代码

css代码：

.popup-board .circle {
  background-color: rgba(253, 255, 89, 0);
  border-radius: 50% 50%;
  opacity: 0;
}
.popup-board.animate .circle1 {
  animation: circle-move1 2s 0s infinite ease-in;
}
@keyframes circle-move1
{
  from {
    background-color: rgba(255, 255, 0, 1);
    transform: scale(1);
  }
  to {
    background-color: rgba(255, 255, 0, 0);
    transform: scale(1.5);
    opacity: 0.3;
  }
}
复制代码

这里要注意设置 .circle 的 opacity: 0；不设置时，会导致动画开始瞬间背景突然亮一下的感觉。