Web学习

网页Web

Lodash中文文档
swiper官网

移动 Web

移动 Web学习链接

平面转换 transform

作用：为元素添加动态效果，一般与过度配合使用
概念：改变盒子在平面内的形态（位移、旋转、缩放、倾斜）

平面转换又叫 2D 转换

平面转换 - 平移

属性：  transform: translate(x轴移动距离, y轴移动距离);
取值：  像素单位数值
        百分比（参照盒子自身尺寸计算结果）
        正负均可
技巧：  translate() 只写一个值，表示沿Xz轴移动
        单独设置X或Y轴移动距离：translateX() 或 translateY()

平移实现居中效果

方法一：手动计算尺寸

position: absolute;
left: 50%;
top: 50%;

// 向左向上移动自身尺寸的一半
margin-left:-100px;
margin-top:-50px;

width:200px;
height:100px;

方法二：百分比参照盒子自身尺寸计算结果

position: absolute;
left: 50%;
top: 50%;
// 向左向上移动自身尺寸的一半
transform: translate(-50%,-50%);

双开门效果

// 1. 布局：父子结构，父级是大图，子级是左右小图
.father {
    margin: 0 auto;
    width: 1366px;
    height: 600px;
    overflow: hidden;
}

.father .left,
.father .right {
    width: 50%;
    height: 600px;
    background-image: url(./image.jpg);
    transition: all 0.5s;
}

.father .right {
    // right 表示取到精灵图右面的图片
    background-position: right 0;

}
// 2. 鼠标悬停效果：左右移动
.father:hover .left {
    transform: translate(-100%);
}

.father:hover .right {
    transform: translateX(100%);
}

平面转换 - 旋转

属性:   transform: rotate(旋转角度);
单位:   deg
技巧:   
    取值正负均可
    取值为正,顺时针旋转
    取值为负,逆时针旋转

平面转换 - 改变转换原点

默认情况下,转换原点是盒子中心点
属性:   transgorm-origin: 水平原点位置 垂直原点位置;
取值:
    方位名词(left、top、right、bottom、center)
    像素单位数值
    百分比
例: transform-origin: right bottom;

平面转换 - 多重转换

旋转会改变坐标轴向
多重转换:以第一种转换形态的坐标轴为准
多重转换技巧: 先平移再旋转
属性:   transform: translate() rotate();

//先平移再旋转  直线型移动旋转
transform: translate(600px) rotate(360deg);
//先旋转再平移  螺旋形移动旋转
transform: rotate(360deg) translate(600px);

//层叠性 后面写的属性生效  多重转换不可分开写
transform: translate(600px);
transform: rotate(360deg);

平面转换 - 缩放

直接修改宽高尺寸: 
        //从左上角开始缩放 
        width: 500px; height: 400px; 

属性:   transform: scale(缩放倍数);
        transform: scale(X轴缩放倍数, Y轴缩放倍数);
技巧:
        通常,只为scale()设置一个值,表示X轴和Y轴等比例缩放
        取值大于1,表示放大;取值小于1,表示缩小

/* 大于1,表示放大 */
transform: scale(2);
/* 等于1,不变 */
transform: scale(1);
/* 小于1,表示缩小 */
transform: scale(0.5);

平面转换 - 倾斜

属性:   transform: skew();
取值:   角度度数 deg

transform: skew(±30deg);

平面转换 - 渐变

渐变是多个颜色逐渐变化的效果,一般用于设置盒子背景

1. 线性渐变

属性：
    background-image: linear-gradient(
        渐变方向,
        颜色1 终点位置,
        颜色2 终点位置,
        ……
    );

取值：  
    渐变方向：可选
        >   to 方位名词
        >   角度度数
    终点位置：可选
        >    百分比

background-image: linear-gradient(
    to right,//45deg,
    red 70%,
    green
);

background-image: linear-gradient(
    transparet,
    rgba(0,0,0,0.5)
);

2. 径向渐变
   作用：给按钮添加高光效果

属性：
background-image: linear-gradient(
    半径 at 圆心位置,
    颜色1 终点位置,
    颜色2 终点位置,
    ……
);

取值：
    半径可以是两条，为椭圆
    圆心位置取值：像素单位数值/百分比/方位名词

background-image: linear-gradient(
    50px 20px at center center,//50px at 50px 30px,
    red,//red 50%, //rgba(255,255,255,0.2),
    pink //transparent
);

空间转换

空间：是从坐标轴角度定义的X、Y和Z三条坐标轴构成了一个立体空间，Z轴位置与视线方向相同。
空间转换也叫 3D 转换。
属性：transform
        transform: translate3d(x, y, z);
        transform: translateX();
        transform: translateY();
        transform: translateZ();
取值：正负均可
    像素单位数值
    百分比（参照盒子自身尺寸计算结果）

电脑显示平面，默认无法观察到 Z 轴平移的效果

视距 perspective

作用：指定了观察者与 Z=0 平面的距离，为元素添加透视效果
透视效果：近大远小、近实远虚
属性：（添加给 直接父级，取值范围800-1200(经验值)）
    perspective: 视距;

空间 - 旋转

transform: rotateZ(值);
transform: rotateX(值);
transform: rotateY(值);
左手法则：根据旋转方向确定取值正负
    左手握住旋转轴，大拇指指向正值方向，其他四个手指弯曲方向为旋转正值方向
拓展：  rotate3d(x,y,z,角度度数):用来设置自定义旋转轴的位置及旋转的角度
        x,y,z取值为0-1之间的数字

立体呈现 transform-style

作用：设置元素的子元素是位于3D空间还是平面中
属性名：transform-style
属性值：    
    flat：子级处于平面中
    preserve-3d: 子级处于3D空间内
呈现立体图形的步骤:
    1. 父元素添加transform-style: preserve-3d;
    2. 子级定位
    3. 调整子盒子的位置（位移或旋转）

空间转换 - 缩放

属性：
    transform: scale3d(x, y, z);
    transform: scaleX();
    transform: scaleY();
    transform: scaleZ();

动画

过渡：实现两个状态间的变化过程
动画：实现多个状态间的变化过程，动画过程可控（重复播放、最终画面、是否暂停）
实现步骤：
    1. 定义动画
        @keyframes 动画名称 {
            from {}
            to {}
        }

        @keyframes 动画名称 {
            0% {}
            10% {}
            ……
            100% {}
        }
    2. 使用动画
        animation: 动画名称 动画花费时长;
        百分比：表示的意思是动画时长的百分比

动画 - animation

animation： 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
提示： 
   1. 动画名称和动画时长必须赋值
   2. 取值不分先后顺序
   3. 如果有两个时间值，第一个时间表示动画时长，第二个时间表示延迟时间

/* linear:匀速 */
animation:change 1s linear;
/* steps:分步动画，工作中，配合精灵图实现精灵动画 */
animation:change 2s steps(3);
/* 如果有两个时间，第一个是动画时长，第二个是延迟时间 */
animation:change 2s 2s;
/* 重复次数，infinite:无限循环 */
animation:change 2s 3;
animation:change 2s infinite;
/* 交替往返 */
animation:change 2s infinite alternate;

/* 动画执行完毕时的状态 */
/* forwards：结束状态 */
/* backwards: 开始状态（默认值）*/
animation:change 2s forwards;

拆分写法：

属性	作用	取值
animation-name	动画名称
animation-duration	动画时长
animation-delay	延迟时间
animation-fill-mode	动画执行完毕时状态	forwards: 最后一帧状态 backwards: 第一帧状态
animation-timing-function	速度曲线	steps(数字): 逐帧动画
animation-iteration-count	重复次数	infinite为无限循环
animation-direction	动画执行方向	alternate为反向
animation-play-state	暂停动画	paused为暂停，通常配合:hover使用

走马灯效果
    无缝动画原理：复制开头图片到结尾位置（图片向后累加的宽度=区域宽度）

动画 - 逐帧动画

核心原理：

    1. steps()逐帧动画
    2. CSS精灵图

属性	作用	取值
animation-timing-function	速度曲线	steps(数字): 逐帧动画

精灵动画制作步骤：

1. 准备显示区域
        盒子尺寸与一张精灵小图尺寸相同
2. 定义动画
        移动背景图（移动距离 = 精灵图宽度）
3. 使用动画
        steps(N),N与精灵小图个数相同

动画 - 多组动画

当动画开始状态的样式 与 盒子默认样式相同时,可以省略 动画开始状态的代码.(但没必要)

animation:
    动画1,
    动画2,
    动画N
;
animation:
    run 1s steps(12) infinite,
    move 3s linear forwards
;

HTML学习
Web移动端学习
JS基础学习
Web API学习
JS进阶学习
ajax学习
Node.js与Webpack学习
Git学习—学习中
vue学习—学习中
小程序学习—学习中

XML教学视频