前言

女生总是会在被求婚的时候感动的痛哭流涕，作为程序员的你如果提前给自己的女票一个求婚的动画，想象一下她会不会很感动呢？

今天就教大家用CSS3来做一个求婚的动画效果吧，源码已经放在了Github上，感兴趣的可以认真看下源码，地址如下：

https://github.com/zhouxiongking/article-pages/tree/master/articles/wedding

CSS

实际效果

首先我们来看看实际运行出来的效果，如下图所示。

效果图

在整个效果中，其实是用到了一系列的图片，然后控制图片的出现顺序以及出现和结束的位置。

在这个效果中，主要应用到的是animation属性，如果对这个属性还不是很了解的，可以先去学习一下。接下来我们具体分析整个动态是怎么实现的。

页面构成

首先，我们看看页面的构成，包括文字，其他的都是图片，包括三个烟花效果，男孩，女孩，男孩手中的花，底部的花。页面HTML代码如下所示。

页面HTML

文字效果

文字部分主要是有一个平移的效果，所以使用translate属性即可。

文字部分动画

烟花效果

在文字旁边的烟花效果实际是一张图片从中心点向外的扩张，因此可以使用scale属性实现，然后通过时间的不同，来显示出不同的烟花。

烟花效果

女孩效果

图中的女孩实际是站着不动，只是通过改变透明度来显示出动画效果，因此可以使用opacity属性来实现。

女孩效果

男孩效果

图中的男孩实际有一个向女孩移动的效果，因此也是通过translate属性来实现。

男孩效果

手中鲜花效果

男孩手中的鲜花实际上也是一个由中心点向外扩张的效果，并且改变透明度，通过scale和opacity属性实现。

手中鲜花效果

底部鲜花效果

底部的鲜花实际是由两张图片重复显示组成，然后给每张图片增加一个动画效果，从效果图中可以看出是有一个从下到上的平移过程，因此也是使用translate属性实现。

底部鲜花效果

至此所有的动画效果都已经讲解完毕了，虽然每个动画只是用到一两个属性，但是组合之后就可以完成这样一个小巧的求婚动画，是不是很有趣呢?

结束语

当然文中的代码并不是全部的实现，文中的代码只包括使用CSS3的动画效果的实现，全部的代码可以去Github上去看。

今天的这篇文章学会了吗？