HTML5消息框JS动效实现

HTML5 的消息框特效，算是前端交互里蛮常用的一招了。比起老掉牙的alert()，现在都偏爱用自定义的弹窗，样式自由，功能也多，体验自然不一样。

HTML5 的canvas、localStorage、WebSocket这些东西，加上 JS 的DOM操作和 CSS3 动画，做出个带动画、可拖动还能响应式的消息框，其实不算难。

像你想要一个“确定/取消”的弹窗，或者自动消失的通知气泡，用这个资源包里的代码改改就行了。拖放？加个drag and drop API就有。内容实时变？配合 AJAX 或者 WebSocket 搞定。消息框里插点图文音视频？也没问题。

里面代码写得挺清楚的，有HTML结构、CSS样式，还有JS交互逻辑。该注释的地方也写了，适合拿来就改。再不济，你用jQuery包一层，兼容性也妥妥的。

不过要注意浏览器兼容问题，尤其老版本的 IE。你可以搭配Modernizr做特性检测，想降级也方便。

如果你刚好在做弹窗提醒的交互，不妨看看这个资源包，里面的效果蛮全的，拿来练手也好，上线用也没啥问题。