案例：弹幕表白技术
今天分享一个很炫酷的弹幕表白技术案例，主要功能是通过点击上方要白的弹幕表白图像，下面的输入框出现，并有音乐播放，我们通过在输入框里面输入内容能够在公屏上显示出来，下面我们一步一步来实现这个看似神秘的技术。实现让弹幕表白图片出现
通过img标签并对它设计样式，动画处理，让图片动起来
<img src="images/xx.png" class="gb"></img>
样式：
img.gb{ position:fixed; left:45%; top:0px; -webkit-animation:bd 5s ease-in-out infinite;}
@-webkit-keyframes bd{
0%{-webkit-transform:rotate(30deg); -webkit-transform-origin:center top;}
50%{-webkit-transform:rotate(-30deg); -webkit-transform-origin:center top;}
100%{-webkit-transform:rotate(30deg); -webkit-transform-origin:center top;}
}
通过css3样式就可以实现让弹幕告白图片动起来
2. 添加背景图片和输入对话框
<div class="gray">
<div class="con">
<span class="col">颜色 <font></font></span>
<p class="txt" contenteditable="true"></p>
<span class="button">清空再写</span>
</div>
</div>
把背景设置为半透明的黑色，美化输入框
div.gray{width:100%; height:100%; background:rgba(0,0,0,0.5); position:fixed; left:0px; top:0px; display:none;}
div.con{width:560px; height:30px; position:fixed; left:30%; bottom:10%;}
div.con span.col{width:80px; height:30px; background:#f3f3f3; display:block; float:left; border-radius:3px 0px 0px 3px; font-size:12px; line-height:30px; text-indent:10px;}
div.con p.txt{height:30px; width:400px; background:#fff; float:left;}
div.con span.button{width:80px; height:30px; background:#ff0066; display:block; float:left; font-size:12px; color:#ffffff; text-align:center; line-height:30px; border-radius:0px 3px 3px 0px;}
div.con span.col font{width:10px; height:10px; display:block; background:red; position:absolute; left:40px; top:9px; border:1px solid #000000;}
通过css样式让输入框看起来美观一点
3. 创建颜色选择器，并结合js让选择字体颜色以及弹幕出现在公屏上等功能实现
首先创建无序列表：
<ul>
<li data-color="#ffff33">颜色 <font style="background-color:#ffff33"></font></li>
<li data-color="#0000ff">颜色 <font style="background-color:#0000ff"></font></li>
<li data-color="#ff0000" class="xz">颜色 <font style="background-color:#ff0000"></font></li>
<li data-color="#ffffff">颜色 <font style="background-color:#ffffff"></font></li>
<li data-color="#00ff00">颜色 <font style="background-color:#00ff00"></font></li>
</ul>
利用js让选择器能够选择颜色，让字显示在公屏上面
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("img.gb").click(function(){
$(".gray").show();
$("#music").get(0).play();
});
$("span.col").click(function(){
$(".con ul").toggle("slow");
});
$(".con ul li").click(function(){
var col=$(this).data("color");
$("span.col font").css("background-color",col);
$(this).addClass("xz").siblings().removeClass("xz");
$(".con ul").toggle("slow");
});
var arr=[];
$("p.txt").keyup(function(e){
var col=$(".con ul li.xz").data("color");
var txt="<span style='color:"+col+"'>"+$(this).text()+"</span>";
$(".Text").html(arr.join("").toString()+txt);
if(e.keyCode==13){
$(this).empty();
arr.push("<p>"+txt+"</p>");
var html="";
for(var i=0;i<arr.length;i++){
html+=arr;
}
$(".Text").html(html);
}
});
</script>
至此绚丽的弹幕告白技术就实现了，有想要源代码的朋友可以给我留言。
