小小白的第一个前端项目（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