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

前言

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

 

内容

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

1、整体布局

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

2、顶部merry christmas文本

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

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

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

4、左右两边的礼物

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

5、左右两边的小球

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

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

demohttp://hcy2367.github.io/merry-christmas-kindhearted-girl/

结语

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

 

 

posted @ 2013-12-24 20:46  chmyun  阅读(501)  评论(1编辑  收藏  举报