CSS之视频背景

    在完成html+css学习阶段任务--“登录注册静态页面”的时候，学会了两个技巧来帮助我实现自己的想法，即本篇简书的标题《css之视频背景及3D翻转》，接下来我将详细解释这两个技巧如何实现及实现原理。

  视频背景的实现：

    当我们看到许多游戏的官方网站，它们的背景图片都是动态的，看起来效果非常好。可我们该如何实现呢？我的第一想法是，动态图片，那一定是gif格式的图片，才能实现动图效果。然后我就去将视频转化为gif格式的动图，还花了5块大洋，结果得到的结果就跟包浆了一样，就像这样：

画质很烂。然后那个网站就怂恿我充个vip一周20块，就可以享受高画质高帧率的转换，我才不中套嘞。结论就是gif格式的动图限制很大，画质、帧率都被压缩在很低的限度。换一种思路思考，是否官方网站那些动态背景图片，它其实是一个视频？有了这个想法马上就去试一试，结果出现这种问题：

    但期望的效果应该是这样的，

   

        界面盒子，logo等图标，全部都没有显示。这又是一个什么鬼问题？然后我把视频样式设为display:none;。结果是视频被隐藏，盒子和图标出现了！所以，盒子和图标是存在的，但是由于某种原因，我们看不到而已。

        在我的理解中，网页是由一个个元素组成的，每个元素都要占用一定的空间，视频也属于网页中的一个元素，自然也会占用一定的空间。那到底该怎么解释界面盒子和图标都消失不见了呢？css三大特性之一--层叠性，这个性质能反映网页其实是一个立体的空间，而只显示视频，没有显示图片的原因很可能是视频将盒子和图标进行了“覆盖”，也就是说盒子和图标都在视频的后面，被视频挡住了，所以我们看不到。

        那我们就把盒子和图标提到前面来，或者把视频放在后面不就解决了？说干就干：

        将视频z坐标设为-99，这样效果如何？

        效果非常成功！这样就可以实现用户体验互动感很强的动态背景。

        3D翻转

            可以通过3d翻转的方式切换登录和注册界面，但3d翻转下次再讲吧，准备吃火锅去了。。溜