html中做开场动画,实例CSS3开场动画的制作与优化_html/css_WEB-ITnose

素材：

期望效果： http://v.youku.com/v_show/id_XMjY2NTc1MzYw.html

一开始需要制作这个动画的时候，其实我是拒绝的，因为单凭这几个素材，即便我对动画了如指掌，也是无从下手的。后来有一天，我见到了wow军团再临的CG动画，脑海中突然灵光一闪，便出现了这样的构思：

“穿越重重的云层，伴随着白天到黑夜的转化，logo从遥远的地方出现，随后往屏幕方向快速移动，在logo快要充满整个屏幕的时候星光一闪，又消逝在远方…”

于是我开始了开场动画的坎坷历程。

云层制作：

云层的制作耗时比较久，期间参阅了网上一些使用CSS模拟云层的博文及示例，下面列出两个比较好的示例：

移动的云： https://codepen.io/montanaflynn/pen/orxwK

3D云： https://www.clicktorelease.com/blog/how-to-make-clouds-with-css-3d

实际上使用单图片来模拟云层会有一些体验问题，比如，当我们试图穿过一片图片生成的云时，会感觉一下就没了，对用户而言会产生一定的视觉落差，而真实的云层是一片区域，所以一片云我使用了5张图片转换方向来生成，这样在三维的场景下我们的云就有了充实感。

下面引用一段Jaume Sanchez Elias写的3D云的生成代码：

function createCloud() { vardiv = document.createElement('div'); div.c