案例：弹幕表白技术

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

1. 实现让弹幕表白图片出现

    通过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. 添加背景图片和输入对话框