前端三件套配合豆包MarsCode 实现钉钉官网动画

作者：PBitW

要写出钉钉官网动画，首先第一步就是分析钉钉官网动画是怎么实现的！

滚动滚轮发现：到了动画这里，界面是不会继续滚动的，而是等待动画执行完成后，才继续滚动！我们要实现的第一点就是：如何固定动画区域！只有搞定这个问题，下一个问题才是如何实现动画！

如何固定动画区域

这是一个解析图：灰色部分是网页内容比较长，蓝色部分是动画的执行区域，相对来说比较高（不然滚动条一滚动就被带走了），但是只有这两个是不行的，还需要红色这个粘性定位的内容，等内容滚动到红色区域时，会一直固定，等父元素（蓝色部分）滚动到最上面的时候，底部会将红色部分一起带走（保证了红色区域不管怎么滚动，有一段时间一直在可视区域内）！

不懂粘性定位可以异步：重学前端 css 详解Position，sticky定位的坑你知道吗？（第二十四天）

创建项目

现在我们一步一步来，配合豆包MarsCode 完成代码 ！首先在 vscode 里准备好我们的前端三件套文件！

其中：body 是灰色部分，playground 是蓝色部分，红色部分是 animation_container，这里只是模仿钉钉这个动画，所以里面用的是小方格 list-item！

豆包 MarsCode 设置样式

使用豆包MarsCode 设置样式！

豆包 MarsCode 优点 1

简单注释，豆包MarsCode 生成的代码还是挺好用的

豆包 MarsCode 优点 2

可以通过尝试换书写注释来生成正确的代码，但是比较难试！

通过菜鸟不断的尝试，豆包MarsCode 居然真的自己写出来了：