这个时候的我刚看完火狐文档的 HTML、CSS 文档和小半本书，勉强算脚尖进入前端大门，前公司官网刚好要插入一个主题单页，前辈们照顾新人，让我不要一直看书，要真正去把知识实践起来。于是在前辈们指导下，我颤颤巍巍开始写，导航栏一上来就下不了手，动画就更不要提。后来，把整个页面写出来后，比吃十顿火锅还开心。下面正式开始，先上图：
先分析
把上图当做你从设计师那拿到的设计稿，
把页面拆分
分出最难最没把握的part
脑中构想大概使用的技术
拆分页面
【导航栏】【Banner部分（区块链）】【四个卡片部分（区块链的主要特点）】【主要内容（区块链服务）】【页面尾部（不含动画）】【背景圆圈】整个页面拆分出六个部分
最难的part
毫无疑问是【监听页面滑到底部】，【小推车动画开始运动并停下来】
使用技术
根据我们已经学习的技术，去构想这个页面。拆分出的六个部分可用基础所学的 HTML 和 CSS 写出。最难的小推车动画部分使用的是 CSS3 动画。
去实现
基础部分
篇幅有限，主在介绍思想和方法，我们以【四个卡片部分（区块链的主要特点）】为例，
我们尽量去把一个问题拆分成许多已知的小问题，上图我们把卡片拆分成上图下文的样式，两个div一个包裹图片另一个包裹文字，先认为都在一行每个卡片都用一个<li>包裹，再右浮动，改变第二张和第四张基于父元素的相对位置。(下图html代码只包括两个卡片)
难点部分
监听页面滑动
我们该什么时候让推车动画开始运动？页面滑动到底部比较合适。动画是Adobe animate导出来的 js 文档。当时找控制停止和启动函数找很久，最后前辈一点拨就找到了，实现方法就是监听页面滑到底部调用启动函数。
有条件的小伙伴可以导出个动画试试，没有条件的小伙伴可以直接到[动画运动]学着控制一个小方块运动，达到学习目的。
动画运动
动画是推车在3S之内移动到虚线框处。抽象一下就是让一个方块3S内平移600px(看实际距离)然后停下来，想通后就是实现它（CSS）：
这篇文章的主要目的是想告诉大家如何细化一个难题，化难为易。没有放出完整的代码，也是希望和我一样的小小白们可以认真分析和大胆实践。
我目前是在职前端开发，如果你现在也想学习前端开发技术， 在入门学习前端的过程当中有遇见任何关于学习方法，学习路线，学习效率等方面的问题， 你都可以申请加入我的前端学习交流裙：前面：603 中间：985 最后：993。里面聚集了一些正在自学前端的初学者裙文件里面也有我做前端技术这段时间整理的一些前端学习手册，前端面试题， 前端开发工具，PDF文档书籍教程，需要的话都可以自行来获取下载。
网友评论