在效果图中可以看出来，整个页面分为四个大的部分，其中有三个部分是图片的样式，并且里面的图片的有一个旋转出现和由模糊到清晰的一个渐变过程，中间的心形部分有一个模拟心的跳动的样式，并且在跳动的同时里面的文字也会跟着进行跳动.
在HTML的代码中，在上面的把三个大div包裹着的六个小div是效果图中的图片部分，因为图片由模糊到清晰是两张图片，所以要三个大div表示三个图片部分，里面的六个小div包裹着六张图片。
类名为imgs的div是中间心形部分，其他的div样式就是心形部分的文字样式，注意因为有一些公共的类我在css的部分封装好了之后在HTMl部分直接调用了封装好的类名，所以有多个div的类名是一致的情况，例如：position、animationLeft等等………
因为CSS部分代码比较多所以我对代码压缩了一下并且拆分成了两部分，先文字和心形部分的CSS代码部分，类top是包裹着心形上面部分的文字的大div的样式，主要是设置一些定位、宽高、文字的大小的样式，还有一个就是关键帧的方法的调用(animation: BOUNCE 2.5s ease 0s infinite;);类certent是中间部分文字的样式，这里的文字是固定的不需要用到关键帧，所以这里用的是固定定位。类Button是下面部分的文字的样式，这里文字的关键帧的样式封装在了(animationLeft和animationright)两个类里面，然后直接在HTMl部分的代码部分添加上这个类名就可以了。类名从M～E1是里面各个文字的样式，包括倾斜多少度(transform: rotate())和具体的位置。
类Imgs是心形部分的样式，除了宽高和一些基础的样式之外比较有意思的部分就是该图片的层次(Z-index)、图片的来源两部分。Z-index后面的值越大显示在最上边，但是却又不会影响到层次低的类的样式，这里我设置的是层次值较小，在类certent设置的层次值较大，多少两个之间的样式却又不会相互影响。还有图片的来源不是本地上传的图片，而是由一大堆字符串所构成的,具体的图片代码如下：(url(“data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjE3M3B4IiBoZWlnaHQ9IjE1OHB4IiB2aWV3Qm94PSIwIDAgMTczIDE1OCIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMTczIDE1OCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBmaWxsPSIjRUY0NjU3IiBkPSJNMTU3LjMzMSwxNS41MDRjLTE5LjU1OS0xOS41NTktNTEuMjcxLTE5LjU1OS03MC44MzEsMGMtMTkuNTU5LTE5LjU1OS01MS4yNzEtMTkuNTU5LTcwLjgzMSwwDQoJYy0xOS41NTksMTkuNTU5LTE5LjU1OSw1MS4yNzEsMCw3MC44MzFsNzAuODMxLDcwLjgzbDcwLjgzMS03MC44M0MxNzYuODksNjYuNzc1LDE3Ni44OSwzNS4wNjQsMTU3LjMzMSwxNS41MDR6Ii8+DQo8L3N2Zz4=”);
animation: HEARTBEAT 2.5s ease 0s infinite;)
然后就是接下来的另一部分的CSS代码，这部分的代码主要有一些图片的样式，以及实现的各种各样的功能的CSS动画的代码，这个页面是主要核心也在于CSS部分的动画的这一部分，不需要用JS代码来实现动画的效果。
类walik是封装的图片的样式的公共的类名，封装好之后就可以直接在HTMl部分的代码中直接去调用，不需要重复地去写这段代码。fadeInLong(模糊)和fadeOutLong(清晰)是一组的图片，两张图片是一样的只不过一张是模糊的一张是清晰的、(fadeInTwo和fadeOutthree)以及(fadeInA和fadeOutB)也是一样，(no-repeat center center / cover)是设置图片不重复出现、在居中位置显示、和铺满整个盒子的样式，animation是设置关键帧的一些样式包括完成的数据，执行的次数等等……
@keyframes fadeIn && fadeOut:图片由模糊到清晰的关键帧动画(这里是用JQuery代码给图片添加上这个关键帧动画的)；
@keyframes HEARTBEAT：心形图片的放大缩小
@keyframes BOUNCE：最上边文字的跳动
@keyframes LeftS：文字向左边跳动
@keyframes Rights：文字向右边跳动
@keyframes FD：图片旋转放大的出现效果
JQuery部分代码：
用一次性定时器设置过4秒之后就执行里面的代码，然后就是给上面的包裹着图片的六个小div设置样式，注意在设置样式之前要给每一个div单独设置一个id，id名称不能重复。
在这里给每个div都添加关键帧的样式，注意关键帧的名称不要写错了，每两个div是一组的，轮番添加上(fadeIn和fadeOut)这两个关键帧的名称，因为在经过旋转放大后图片的位置会有点偏移所以需要再重新设置一些图片的所在位置。