能否将视频转换为纯 CSS?
这篇文章探讨了使用纯 CSS 播放视频的可能性。作者首先尝试使用 scroll-timeline 属性根据滚动位置创建动画效果,但发现 Safari 浏览器不支持该属性。之后,作者尝试使用 JavaScript 动态设置 CSS 变量来模拟 scroll-timeline 的效果,并成功实现了简单的动画。为了进一步提高动画效果,作者尝试加载 3D 模型并将 div 元素定位在模型的顶点上,但发现这种方法性能较差。最终,作者探索了两种使用纯 CSS 播放视频的方法:一种是使用大量 div 元素和 CSS 动画帧来模拟视频的每个像素,另一种是使用 box-shadow 属性来实现类似的效果。作者发现,box-shadow 方法的性能更好,并且创建了一个 Web 应用程序,可以将视频转换为纯 CSS 动画。
阅读更多