--- theme: yu --- ![canvas 00_00_00-00_00_30.gif]

每年的苹果新产品发布，其官网都会配套更新相应的单页滚动产品介绍页。其中的动画特效都非常有意思，今年 iPhone 14 Pro 的介绍页不例外。 最近，刚好有朋友问到，其对官网的一段文字特效特别感兴趣

事情是这样的，前段时间拿到公司的数据大屏原型图让我一天内把一整个页面做出来。 简单看了看，就是一个3840 * 1840的大屏然后几个列表几个图例看起来也没有多复杂。 唰！很快啊加了一会班

最近 iPhone 14 Pro 的灵动岛很火，我个人觉得这个设计算是挺巧妙的，用软件层面掩盖硬件层面的缺陷 今天我们就来用`CSS`来还原一下灵动岛吧，就以来电状态下的灵动岛为例尝试进行还原

好的前端页面在实现设计图的同时，如果也有极强的与用户交互效果，那么给用户带来的体验是极好的。近期整理了一组相对炫酷前端按钮交互动画，今天分享给大家

如果这画平时是轻卷着的，地震的时候自动展开，上面写着几个大字“地震了，大家快跑”，那不就可以挽救很多生命了么。 问题的关键是这画怎么自动展开？作为一个前端coder，我想到了css。