怎样用css3做一个类似阿拉丁特效的嵌有动态画图的canvas的窗体

阅读更多

题目有点大，实施比较难。项目中需要弹出窗体逐渐全屏，关键是窗体里边是一个canvas，并且是在bootstrap的框架中。
先说尝试的几个方法：1、用screenfull.js https://github.com/sindresorhus/screenfull.js，全屏可以，但是这样屏蔽了bootstrap的其他弹出窗体功能。
2、采用jquery的动画，应该是好的方案，经实验能够实现逐渐放大。但是问题是窗体内容是canvas而不是图片。结果还是不行。
3、用bootstrap自己带的弹出窗体。关键还是一样。在这个弹出窗体上不能再有弹出窗体了。同样，也屏蔽了原先的弹出窗体。
4、自己用css3搞。
为此专门设计了一个步骤：
1、首先canvas根据屏幕大小生成一张图片作为背景，这样就能避免窗口缩放发生的图像失真问题。
2、动画完成后，撤掉图片，看canvas是否有设置透明度的属性。然后显现出canvas。这样应该可以。先试着做一下。

最后做完，用javascript结合jquery。然后闪烁背景用css3动画特效。