StarWar Prelude CSS3动画效果

星球大战的片头动画，居然能用纯 CSS3 做出来，还是挺惊喜的。StarWar Prelude CSS3 Animation就是这么一个项目，完全没用 JS，全靠@keyframes、transform和opacity等属性，硬是搞出了那种经典的滚动文字特效，效果还蛮顺的。

用@keyframes定义动画关键帧，像from、to或者50%这种时间点你可以自定义，控制元素怎么动、怎么变形。比如要做个文字从屏幕底部慢慢向远处缩小并消失的动画，用transform: translateZ配合scale就能搞定。

动画应用方式也挺直白的，写个animation属性就行了，像这样：

p.crawl {
  animation: starwarsCrawl 30s linear infinite;
}

加上opacity或box-shadow还能再润色一下，看起来更像电影里的感觉。

它里面也用了:before和:after这种伪元素，制造层次感或者加特效都挺方便的。再配合一下Flexbox或Grid布局，响应也快，适配各种设备问题不大。

如果你正好在折腾 CSS 动画，或者想做点有趣的视觉效果，这个项目还挺值得扒一扒的。想仿星战字幕，或者搞点炫酷的片头，不妨拿来参考一下。