日期:2014-05-17  浏览次数:20629 次

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

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