圣诞节平安夜主题(送给大家的小礼物)
前言
又到了一年一度的圣诞节平安夜,作为一个自认为有点伎俩的前端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~
因为分享,所以简单;因为分享,所以快乐。