首页宣传动画CSS3+JavaScript
首页顶部的宣传动画，是不少网站用来吸引眼球、树立品牌形象的常用手段。这里的宣传 flash，虽然叫 flash，其实用的是CSS和JavaScript搞定的，摆脱了老掉牙的 Flash 插件，兼容性和性能都更稳妥了。
CSS3动画现在真挺香的，像transition、animation这些属性，配合一点transform，做出丝滑的过渡效果，几乎不费力。视觉上效果够炫，加载起来也快，用户体验还不错。
JavaScript这边负责的就是互动性了，比如点击开始、暂停动画，或者鼠标悬停触发效果这些。用原生写也行，不过你要是图省事，像jQuery、Vue这类库也可以上。
文件结构也比较简单，压缩包里有个flash文件，就是整个动画的源码。有包括index.html，style.css，还有main.js之类的，基本就是一套完整的前端结构。
不过做这类动画，几个坑你得注意：一是加载速度别太慢，首页嘛，太拖沓用户肯定关了；二是要兼容各种浏览器，最好自己多测几遍；三是别全靠视觉吸引，交互也要设计得合理点。
哦对了，如果你对这种动画效果还挺感兴趣，可以看看这些例子：HTML 菜单集合 CSS、JavaScript 动态效果、CSS3 动态时钟、10 例精彩 CSS3 动画效果这些都挺有参考价值的。
如果你也想做个首页吸睛效果，不妨从这份代码下手看看，前端三件套熟悉点，基本能随心所欲调整风格和效果。
文件大小：804.72KB
评论区