这时候我刚看完HTML，CSS文档和半本Firefox文档，勉强踮着脚进了前门。官网，前公司，正好插了单个话题页。学长很照顾新人，告诉我不要一直读书，要真正把知识运用到实践中去。 于是在前辈的指导下，我颤抖着开始写，导航栏一上来就不行了，更别说动画了。 后来写了一整页，比吃十个火锅还开心。 正式开始吧，先上图:先分析上图作为你从设计师那里拿到的设计稿，把页面拆分成最难和不确定的部分。想象一下头脑中可能使用的技术。拆分页面【导航栏】【横幅部分(区块链)】【四卡部分(区块链主要特色)】【主要内容(区块链服务)】【页尾(无动画)】【背景圈】整个页面最难的部分无疑是【监控页面底部】，[ 拆分的六个部分可以用基本的HTML和CSS编写。 电车动画最难的部分是CSS3动画。 要实现基础部分篇幅有限，注重细节的思路和方法，我们以【四卡部分(区块链主要特色)】为例。我们尽力把一个问题拆分成许多已知的小问题。上图中，我们将卡片拆分成上下两种样式，两个div，一个包裹图片，一个包裹文字。第一，认为它们都在一条线上，每张牌用一个< li & gt包，然后向右浮动，根据父元素更改第二个和第四个工作表的相对位置。 (下图的html代码只包含两张卡片。)难点部分监控页面滑动。我们应该在什么时候让购物车动画开始移动？滑动页面底部更合适。 动画是由Adobe animate导出的js文档。 当时找控制停止和启动功能花了很长时间，最后前辈们一点点拨就找到了。实现方法是监控页面滑动，调用启动函数。 有条件的朋友可以尝试导出一个动画，无条件的朋友可以直接去【动画运动】学习控制一个小方块运动，达到学习目的。 动作动画是购物车在3S内移动到虚线框。 一般来说，让一个正方形在3S内平移600px(看实际距离)然后停下来，想通了再实现(CSS)。这篇文章的主要目的是告诉你如何提炼一个难题，使它变得简单。 没有完整的代码发布，希望小小白人和我一样认真分析，大胆实践。 目前在做前台开发。如果你现在想学习前台开发技术，并且遇到任何关于学习方法、学习路线、学习效率等方面的问题。入门过程中可以申请加入我的前台学习交流裙:前:603中:985末:993。 有少量初学者裙档正在自学前台。还有少量我在做前台技术期间整理的前台学习手册、前台面试问题、前台开发工具、PDF文档、书籍和教程。如果需要，可以自己下载。