小小白的第一个前端项目（HTML、CSS）
这个时候的我刚看完火狐文档的 HTML、CSS 文档和小半本书，勉强算脚尖进入前端大门，前公司官网刚好要插入一个主题单页，前辈们照顾新人，让我不要一直看书，要真正去把知识实践起来。于是在前辈们指导下，我颤颤巍巍开始写，导航栏一上来就下不了手，动画就更不要提。后来，把整个页面写出来后，比吃十顿火锅还开心。下面正式开始，先上图：
先分析
把上图当做你从设计师那拿到的设计稿，
- 把页面拆分
- 分出最难最没把握的part
- 脑中构想大概使用的技术
拆分页面
【导航栏】【Banner部分(区块链)】【四个卡片部分(区块链的主要特点)】【主要内容(区块链服务)】【页面尾部(不含动画)】【背景圆圈】整个页面拆分出六个部分
最难的part
毫无疑问是【监听页面滑到底部】，【小推车动画开始运动并停下来】
使用技术
根据我们已经学习的技术，去构想这个页面。拆分出的六个部分可用基础所学的 HTML 和 CSS 写出。最难的小推车动画部分使用的是 CSS3 动画。
去实现
基础部分
篇幅有限，主在介绍思想和方法，我们以【四个卡片部分(区块链的主要特点)】为例，
我们尽量去把一个问题拆分成许多已知的小问题，上图我们把卡片拆分成上图下文的样式，两个div一个包裹图片另一个包裹文字，先认为都在一行每个卡片都用一个<li>包裹，再右浮动，改变第二张和第四张基于父元素的相对位置。(下图html代码只包括两个卡片)
<ul> <li> <img src="images/tedian1.png" alt=""> <div class="con"> <h1>安全</h1> <p>数据在多台计算机上完整地分发，攻击者没有一个单一的入口点。</p> </div> </li> <li> <img src="images/tedian2.png" alt=""> <div class="con"> <h1>可访问</h1> <p>网络中的所有节点都可以轻松访问信息。</p> </div> </li> </ul>
难点部分
监听页面滑动
我们该什么时候让推车动画开始运动?页面滑动到底部比较合适。动画是Adobe animate导出来的 js 文档。当时找控制停止和启动函数找很久，最后前辈一点拨就找到了，实现方法就是监听页面滑到底部调用启动函数。有条件的小伙伴可以导出个动画试试，没有条件的小伙伴可以直接到[动画运动]学着控制一个小方块运动，达到学习目的。
window.onscroll = function(){
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
var scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
if(scrollTop+windowHeight==scrollHeight){
document.getElementById("animation_container").classList.add("van");
fnStartAnimation();
}
} 动画运动
动画是推车在3S之内移动到虚线框处。抽象一下就是让一个方块3S内平移600px(看实际距离)然后停下来，想通后就是实现它(CSS)：
@keyframes people { /* keyframes名称为people */
from{
transform: translateX( 0px); /* 开始位置是0 */
}
to{
transform: translateX(-600px); /* 结束位置是600 */
}
/* 这段功能是让动画向左（所以是）走600px的距离 */
}
.van {
animation-name: people; /* 指定 类van 要使用的keyframes名称为 people */
animation-duration: 2.2s; /* 动画时长为2.2s */
animation-timing-function: linear; /* 让动画从头到尾的速度是相同的，匀速变化 */
animation-iteration-count: 1; /* 动画播放次数为一次 */
animation-fill-mode: forwards; /* 动画播放结束后停在最后一帧 */
} 这篇文章的主要目的是想告诉大家如何细化一个难题，化难为易。没有放出完整的代码，也是希望和我一样的小小白们可以认真分析和大胆实践。
作者：dei是小吴
链接：https://juejin.im/post/5ec276b95188256d48709bc4