web前端开发学习篇第二章 H5 + C3前端学习笔记第二章，包括字体图标的使用；平面转换的平移、旋转、转换等语法；渐

一、字体图标

字体图标展示的是图标，本质是字体
处理简单的、颜色单一的图片

优点：

灵活性：灵活地修改样式，例如：尺寸、颜色等
轻量级：体积小、渲染快、降低服务器请求次数
兼容性：几乎兼容所有主流浏览器

使用字体图标

(1)引入字体图标样式

<link rel="stylesheet" href="/iconfont.css>

(2)调用图标对应的类名，必须调用2个类名

iconfont类：基本样式，包含字体的使用等

<!-- iconfont 是固定的 -->
<span class="iconfont icon-shouye-zhihui"></span>

icon-xxx:图标对应的类名：

二、平面转换

transform：实现元素的位移、旋转、缩放

结合 overflow：hidden 清除超出父元素范围的元素内容

元素过度：transform: all time;

平移语法：

transform:translate(水平移动距离，垂直移动距离）

取值：

正负均可
像素单位数值
百分比（参照物为盒子自身尺寸）

    .box{
        margin: 50px auto;
        border: 1px solid #000;
        width: 400px;
        height: 500px;
    }
    .son{
        width: 50px;
        height: 60px;
        background-color: black;
        /* 间隔时间 0.5s */
        transition: all 0.5s;
    }
    .box:hover .son {
        /* 鼠标移入box内，son向下移动50px右移动100px */
        transform: translate(50px,100px);
    }

技巧：

如果translate()只给出一个值，表示x轴方向移动
单独设置某个方向的移动距离：translateX()&translateY()

拓展：实现绝对定位元素居中的效果

.son {
        position: absolute;
        left: 50%; 
        top: 50%;
        transform: translate(-50%,-50%);
}

旋转语法：

transform：rotate(角度)

注意：角度单位：edg

技巧：

取值为正，顺时针旋转
取值为负，逆时针旋转

示例：顺时针旋转360°

transform: rotate(360deg);

转换原点

语法：

默认原点是盒子中心点
transform-origin: 原点水平位置原点垂直位置

取值：

方位名词（left、top、right、bottom、center）
像素但为数值
百分比（参照盒子自身尺寸计算）

 .son{
         间隔时间 0.5s
        transition: all 0.5s;
        将旋转中心点修改为元素右下角
        transform-origin: right bottom;
    }
    .box:hover .son {
        鼠标移入box内，son围绕右下角旋转360°
        transform: rotate(360deg);
    }

多重转换

语法 transform：translate() rotate();

向左平移 + 旋转
transform:translate(100px) rotate(160deg);

使用scale改变元素的尺寸

语法： transform:scale(x轴缩放倍数,y轴缩放倍数);

技巧：

一般情况下，之为scale设置一个值，表示x轴和y轴等比例缩放
- transform:scale（缩放倍数)
- scale值大于1表示放大，scale值小于1表示缩小

将元素放大1.5倍
transform: scale(1.5);
将元素缩小0.5倍
transform: scale(0.5);

三、渐变

渐变背景

bgckground-image
多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景
常用类名：mask

初级用法
background-image: linear-gradient( pink, green);
半透明渐变：透明：transparent-rgba()
background-image: linear-gradient(
            transparent,
            rgba(0,0,0,.6)
        );

四、空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果

空间：从坐标轴角度定义的。x、y、z三条坐标轴构成一个立体空间，z轴位置与视线方向相同
空间转换也叫3D转换

空间位移

语法： transform:
- translate3d(x,y,z)
- translateX(值)
- translateY(值)
- translateZ(值)
取值(正负均可)
- 像素单位数值
- 百分比

拓展：默认情况下，无法观察到Z轴位移效果，因为Z轴是视线方向，移动效果应该是举例的远或近，电脑屏幕是平面，默认无法观察远近效果

透视

近大远小、近清除远模糊、近实远虚

注意：透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离

属性(添加给父级)：
- perspective: 值;
- 取值：像素单位数值，数值一般在800 - 1200

.box {
        perspective: 1000px;
}
.son {
        transition: all 0.5s;
}
.box:hover .son {
        transform:translateZ(-200px);
}

<div class="box">
        <div class="son"></div>
</div>

空间旋转

语法：transform 单位：deg
- rotateZ()效果与平面旋转类似
- rotateX()
- rotateY()

立体呈现

语法：transform-style: preserve-3d
- 使子元素处于真正的3d空间
- 默认值flat，表示子元素处于2d平面内呈现

空间缩放

语法：transform:
- scaleX(倍数)
- scaleY(倍数)
- scaleZ(倍数)
- scale3d(x,y,z)

五、动画

过度可以实现2个状态间的变化过程，动画可以实现多个状态间的变化过程，且过程可控（重复播放、最终画面、是否暂停）

动画本质是快速切换大量图片时在人脑中形成的具有连续性的画面
构成动画的最小单元：帧或动画帧

用法：

animation: 动画名动画时间速度曲线延迟时间重复次数动画方向执行完毕时状态;

多组动画

用逗号隔开
animation: 
        动画1,
        动画2,
        动画N
     ;

动画名

animation-name: none

动画时间

animation-duration: 0s

速度曲线

animation-timing-function:

取值	说明
linear	动画从头到尾的速度是相同的。
ease	默认。动画以低速开始，然后加快，在结束前变慢。
ease-in	动画以低速开始。
ease-out	动画以低速结束。
ease-in-out	动画以低速开始和结束。
steps(int,start/end)	指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下：- start：表示直接开始。end：默认值，表示戛然而止。

延迟时间

animation-delay: 0s

重复次数

animation-iteration-count: 1

值	描述
n	一个数字，定义应该播放多少次动画
infinite	指定动画应该播放无限次（永远）

动画方向

animation-direction:

值	描述
normal	默认值。动画按正常播放。
reverse	动画反向播放。
alternate	动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。
alternate-reverse	动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。

执行完毕时状态

animation-fill-mode:

值	描述
none	默认值。动画在动画执行之前和之后不会应用任何样式到目标元素。
forwards	在动画结束后（由 animation-iteration-count 决定），动画将应用该属性值。
backwards	动画将应用在 animation-delay 定义期间启动动画的第一次迭代的关键帧中定义的属性值。这些都是 from 关键帧中的值（当 animation-direction 为 "normal" 或 "alternate" 时）或 to 关键帧中的值（当 animation-direction 为 "reverse" 或 "alternate-reverse" 时）。
both	动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。

规定动画是运行还是暂停

animation-play-state:

值	描述
paused	指定暂停动画
running	指定正在运行的动画

动画时间轴

animation-timeline : auto

注意：

动画名称和动画时长必须赋值
取值不分先后顺序
若有两个时间值，第一个表示动画时长，第二个表示延迟时间

定义动画
写法一
@keyframes 动画名称 {
        from {}
        to {}
    }
写法二
   百分比：动画总时长占比
@keyframes 动画名称 {
        0% {}
        10% {}
        15% {}
        100% {}
    }
示例
.son {
        animation: change 1s;
    }
/* 定义动画：宽度从200变大到400 */
    @keyframes change_1 {
        from {width: 200px;}
        to {widows: 400px;}
    }
/* 定义动画：宽度从0变大到600再变小到300 */
@keyframes change_2 {
        20% {width: 0;}
        60% {width: 600px;}
        20% {width: 300px;}
    }

逐帧动画

语法： animation-timing-function: steps(N)
步骤
1. 准备显示区域
  - 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
2. 定义动画
  - 改变背景图的位置（移动距离就是精灵图的宽度）
3. 使用动画
  - N与精灵图上小图个数相同
  - 添加无限重复效果

web前端开发学习篇 第二章 H5 + C3