【小结】pc前端开发流程-从开始到交互

pc网页开发流程

1.准备阶段

拿到设计图(如果有)
开始标注(各个元素间距,横/纵轴 并划分元素)

• 划分屏和元素
• 划分容器wrap

切图（切出logo、UI、图、背景、）

• 切图时候也可以顺带标注动态效果,可以命名并编写文档了,最好画下节点图

2.静态页面开发

• 开发技巧
  • 从大到小
  • BEM开发模式
    BEM代表块（Block），元素（Element），修饰符（Modifier）。
    原文: https://www.w3cplus.com/css/bem-definitions.html © w3cplus.com
    模块（没有前缀，多个单词用-连接）
    元素（在模块之后，可以有多个层级，以_连接）
    修饰（某元素，或者某模块特别的状态，必须有一个状态名和状态值，使用连接）
    (1)首先根据效果图写出css样式
    (2)根据效果图写出html结构
    (3)调整结构达到效果

---

3.网页动态效果开发

3.1 css动画新特性

1.新的选择器, 如:div:last-child
2.多列布局column-count
+ column-count 属性规定元素应该被划分的列数。
详细css3属性column知多少

语法：

column-count: number|auto;
3.圆角:border-radius
4.渐变背景图:background-image:-webkit-gradient(linear,0%0%,100%0%,from(#2A8BBE),to(FE280E));
+ 关于这块详解请参考设计渐变的背景之-webkit-gradient

5.transform
6.transitions

• css3的transform，translate和transition之间的区别与作用

7.animation

• css实现动画的两种方式
  1.transition:all 1s 可以使css动态效果，如hover延迟一秒钟响应
  例如:

.screen-1__heading{
    /*过度参数*/
    transition: all 1s;
}

2.(例如)-webkit-animation:rock 2s infinite ease-in-out .5s;
rock是定义了一个帧动画,然后会在2s内播放.infinite表示循环, .5表示延迟的时间
@-webkit-keyframes rock{
0%{ transform:rotate(0deg)}
10%{ transform:rotate(3deg)}
20%{ transform:rotate(-3deg)}
30%{ transform:rotate(2deg)}
40%{ transform:rotate(-2deg)}
50%{ transform:rotate(1deg)}
60%{ transform:rotate(-1deg)}
70%{ transform:rotate(0deg)}
80%{ transform:rotate(0deg)}
90%{ transform:rotate(0deg)}
100%{ transform:rotate(0deg)}
}

3.2开发技巧-测试模式

以css动画测试脚本为例
css动画主要包含三个状态,静态static、初始态init、完成态done
注意:测试时每次点击务必等待动画演示完毕再点击

测试脚本代码如下:
css部分:

.screen-1__heading{
    /*过度参数*/
    transition: all 1s;
}
/*开始状态*/
.screen-1__heading_animate_init{
    opacity: 0;
    transform: translate(0,100%);
}
/*结束状态*/
.screen-1__heading_animate_done{
    opacity: 1;
    transform: translate(0,0%);
}

js部分:

var screenAnimateElements = { //将要加动画的类名及其子类名存储在screenAnimateElements里
    '.screen-1': [
        '.screen-1__heading',
        '.screen-1__phone',
        '.screen-1__shadow'
    ]
}

function setScreenAnimate(screenCls) {
    var screen = document.querySelector(screenCls);//获取当前屏的元素
    var animateElements = screenAnimateElements[screenCls];//从screenAnimateElements取出需要设置动画的元素
    var isSetAnimateClass = false;//是否初始化子元素的样式
    var isAnimateDone = false; // 当前屏幕下所有子元素的状态是DONE？
    screen.onclick = function () {
        //初始化样式,增加init
        if( isSetAnimateClass === false){
            for(var i=0;i done
        if(isAnimateDone === false){
            for(var i=0;i init
        if(isAnimateDone === true){
            for(var i=0;i

小技巧:可以使用以下遍历对象代码替换现有的遍历数组

for(k in screenAnimateElements){ // 遍历screenAnimateElements对象中的元素并赋值在k中
  setScreenAnimate(k);
}

---

4.网页交互效果开发

网页交互实质上是JS控制css动画实现交互