案例：弹幕表白技术

今天分享一个很炫酷的弹幕表白技术案例，主要功能是通过点击上方要白的弹幕表白图像，下面的输入框出现，并有音乐播放，我们通过在输入框里面输入内容能够在公屏上显示出来，下面我们一步一步来实现这个看似神秘的技术。

实现让弹幕表白图片出现

    通过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[i];

}

$(".Text").html(html);

}

});

</script>

至此绚丽的弹幕告白技术就实现了，有想要源代码的朋友可以给我留言，有想要学习html5技术的朋友可以点击后面的链接：网站制作入门到实战教程