PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

• 新的一年即将来临，祝各位新春快乐～～来年少bug，少需求。

让“福”转起来的效果。

先来看效果（手机渣，见谅）

如何实现

思路：

1. 先用@keyframes定义动画规则
2. transform rotate定义动画规则为旋转
3. 使用animation来循环运用这个规则

2.先建一个html项目，是不是vue都可以

• 在images中放一个“福字”的png图片
• index.html中写一个div标签承载这个福字

<div class="new-year">
    <div class="fu"></div>
</div>

3.定义一个动画规则 @keyframes

@keyframes手册：

@keyframes *animationname* {*keyframes-selector* {*css-styles;}* }

值	说明
animationname	必需的。定义animation的名称。
keyframes-selector	必需的。动画持续时间的百分比。合法值：0-100% from (和0%相同) to (和100%相同)注意：  您可以用一个动画keyframes-selectors。
css-styles	必需的。一个或多个合法的CSS样式属性

按手册的说明，定一个名为fu的动画规则，transform rotate定义旋转，开始0%时0度，结束100%时为360度。

@keyframes fu {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

• transform: rotate(旋转) | scale(缩放) | skew(斜切) | translate(移动);
• 旋转rotate()：通过指定的角度参数对元素指定一个2D rotation(2D旋转)，需先有transform-origin属性的定义（默认旋转中点是中心点），这里我们选择默认就好啦。

4.animation 使用定义的动画规则

animation手册：

animation: name duration timing-function delay iteration-count direction;

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

根据手册，就可以让animation使用fu的动画规则，2秒完成一次动画，linear代表动画开始到结束速度是一样的，infinite代表无限循环

animation: fu 2s linear infinite;

结尾

看到这里，是不是觉得写个动画很简单，只要根据手册提供的属性写就可以实现了。如果你不想查手册，运用chrome的调试功能，可以轻松的获取这些属性，修改他们来预览效果。