PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛
一、前言
我们给亲朋好友送去祝福，通常是使用微信、QQ等沟通工具，这个贺卡可以让你选择不同的人物性别、人物发型、眉毛、眼睛、鼻子、嘴巴、服饰、专属送祝福人物、祝福语等等。
二、效果展示
1、首页
进入一开始的界面，中间部分是一个倒挂着的福字（福到了），福字下面是一个可以摆动的小老虎，询问者你的性别，选择左侧的男生、右侧的女生按钮进入不同的形象界面。
2、定制形象
男生
动态图
女生
动态图
在首页对性别进行选择之后，进入新的界面，可以按照自己的喜好完善人物的面部形象、发型设计、眉毛、眼睛、鼻子、嘴巴、眼镜、帽子等，生成一个专属拜年形象。
3、填写祝福信息
填写你的姓名以及想要祝福人的姓名信息，点击确认按钮，进行下一步操作。
4、选择专属祝福语
上面有五个已经准备好的祝福语，如果不满意可以自己在框框里面自定义一个祝福语。
5、获取定制祝福界面
右上角是一个恭喜发财的背景音乐（新年发大财），点击按钮播放音乐。中间是一个刚才你选择的专属拜年形象、祝福语、祝福人员信息。
三、核心代码讲解
1.首页
<div>
<div class="page page1">
<img class="logo animate-bounceInDown" src="img/page1/fz.png">
<div class="yoursex animate-bounceInUp">请问你的性别是 ？</div>//选择性别
<img class="monkey" src="img/page1/kouzuo.png">//动态小老虎
//男孩选择
<a href="page2_boy.html"><img class="boy animate-fadeInLeft" src="img/page1/boy.png"></a>
//女孩选择
<a href="page2_girl.html"><img class="girl animate-fadeInRight" src="img/page1/girl.png"></a>
</div>
复制代码2.人物形象
<div class="face_chose">//对于面部形象的选择，将不同的面部特征排列一起，
对于人物发型、眉毛、眼睛、鼻子、嘴巴、服饰原理也差不多
<div class="chose chosed"><img id="face1" src="img/coin/2-6.png" onclick="changeface(this.id)"></div>//下面以脸型选择为例，其它的部分原理一样
<div class="chose"><img id="face2" src="img/coin/2-1.png" onclick="changeface(this.id)"></div>
<div class="chose"><img id="face3" src="img/coin/2-2.png" onclick="changeface(this.id)"></div>
<div class="chose"><img id="face4" src="img/coin/2-3.png" onclick="changeface(this.id)"></div>
<div class="chose"><img id="face5" src="img/coin/2-4.png" onclick="changeface(this.id)"></div>
<div class="chose"><img id="face6" src="img/coin/2-5.png" onclick="changeface(this.id)"></div>
复制代码3.祝福人员信息
</div>
<div class="inputname animate-fadeInDown">
//填写自己的姓名
<div><input type="text" class="yourname" id="yourname" placeholder="您的姓名"></div>
//填写祝福者的姓名
<div><input type="text" class="hisname" id="hisname" placeholder="被祝福者姓名"></div>
//确认选择
<div class="choseok animate-fadeInUp" onClick="nextstep()">确认选择</div>
<img class="monkey animate-fadeInRight" onClick="nextstep()" src="img/page1/kouyou.png">
</div>
复制代码4.选择祝福语
<div id="xingming" class="page page4">
<img class="logo2016 animate-zoomInDown" src="img/page5/2022.png">//祝福语上面的2022图标
<div class="title">请选择您的祝福语</div>
<div class="inputyourword">
<div class="wordchose">//进入word选择
//祝福语的内容模块
<textarea disabled="disabled" class="yourword selected" id="selected" rows="2" cols="20">
给你虎虎的祝福，虎虎的甜蜜，虎虎的运气，虎虎的健康，虎虎的快乐，虎虎的心情，虎虎的欣慰，虎虎的顺利，
虎虎的幸福，虎虎的人生！
</textarea>
</div>
复制代码5.祝福界面
<div class="txt">//获取上个界面填写的的祝福信息之后，会自动生成相关祝福语
<div class="title">亲爱的<span class="name" id="hisname"></span></div>
<div class="title">虎年到了</div>
<div class="name" id="myname">知心宝贝</div>
<div class="title">在此给您拜年了</div>
<div class="word animate-fadeInDownmiddle" id="word"></div>
复制代码6.JS样式
$(function(){
$('.kind img').click(function(){
$('.kind img').removeClass("selected");
$(this).addClass("selected");
});
});
$(function(){
$('#facekind').click(function(){
$('.face_chose').siblings().addClass("hide");//面部选择
$('.face_chose').removeClass("hide");
});
});
$(function(){
$('#hairkind').click(function(){
$('.hair_chose').siblings().addClass("hide");//头发选择，对于其它的样式同理
$('.hair_chose').removeClass("hide");
});
});
复制代码四、附录
参考Github代码是一个2016年的猴年祝福界面，链接：猴年祝福。
虎年到了，给你虎虎的祝福，虎虎的甜蜜，虎虎的运气，虎虎的健康，虎虎的快乐，虎虎的心情，虎虎的欣慰，虎虎的顺利，虎虎的幸福，虎虎的人生！