圣诞节平安夜主题(送给大家的小礼物)

前言

 又到了一年一度的圣诞节平安夜，作为一个自认为有点伎俩的前端Developer，今天萌生了一个想法，想搞点玩意，用于祝福大家merry christmas，特别是想送给kind-hearted girl。于是今天一整个下午都没怎么工作，都在想主题怎么搭配才恰当，要被扣工资了╮(╯▽╰)╭

 

内容

 由于本人对设计不熟悉，没有艺术细胞，只能根据自己的感觉走。

1、整体布局

嵌入雪花动画的效果并以此为背景，宽度和高度根据window的大小生成。

2、顶部merry christmas文本

以动画队列形式逐渐显示出来，并添加css3文字阴影、transition动画等属性。

3、页面右则的音频播放器

没有自定义播放器控件，主要是循环播放圣诞节歌曲，衬托节日气氛。

4、左右两边的礼物

纯属是装饰效果，没有发挥太大的作用。

5、左右两边的小球

在merry christmas文本显示完毕后，两小球开始向对方“走”来，蕴含凝聚和吸引的意义。当重叠后，显示“某人”的名字，你懂的~

注：代码没来得及优化，代码已经放在github上，欢迎随时fork和download，请使用现代浏览器查看~

demo：http://hcy2367.github.io/merry-christmas-kindhearted-girl/

结语

以上设计只是本人突然萌发的一个念头，整体没有太大的技术含量，但是表达祝福的含义不浅，ps：dear friends，merry christmas to U， especially to somebody~