一、字体图标

字体图标 结合阿里巴巴矢量库，下载字体图标。通过引入字体图标样式表(iconfont.css),以及使用类名调用的方式使用字体图标。

二、平面转换

位移： 通过使用 transform: translate(50px, 100px); 属性使元素发生位移。两个数值分别表示x轴、y轴位移距离。
旋转： 通过使用 transform: rotate(-360deg); 使元素发生旋转，单位为deg。必须有过度(transition: all .5s;)，才有旋转效果。
缩放： 通过使用 transform: scale(1.2); 使元素产生缩放效果。

三、渐变

通过background-image属性，添加linear-gradient写入多个颜色，使之发生渐变效果
eg:
1.background-image: linear-gradient(pink,green,hotpink);
2.background-image: linear-gradient(transparent,rgba(0,0,0, .6));

四、空间转换

基本使用：
transform: translate3d(5px, 15px, 5px); 三个数值分别表示X轴、Y轴、Z轴位移距离。
透视效果：
由于电脑屏幕是平面，不能使人产生空间感。使用perspective 实现视觉上近大远小的效果，也称为透视效果
这个属性必须加在父级元素，才能使子级元素产生透视效果。
perspective的值称为视距或透距，指眼睛到屏幕之间的距离，取值一般在800-1200之间取值
空间旋转：
transform: rotateZ(60deg); 沿着Z轴的中心旋转,展示出来顺时针效果
transform: rotateZ(60deg); 沿着X轴的中心旋转,展示出来上下翻动效果
transform: rotateZ(60deg); 沿着X轴的中心旋转,展示出来左右翻动效果
空间缩放：
transform: scale3d(0.5, 1.5, 1.9);使元素产生缩放效果。
立体呈现：
立体呈现，实现方法是，父级添加transform-style: preserve-3d，使父级变成立方体，子级处于立体空间中。
transform-style默认为preserve-2d表示子级处于2d平面呈现

五、动画

1.动画基本使用

第一步：定义动画
方式一(两个状态的变化)：

    @keyframes 动画名称 {
     from{}
     to{}
    }

方式二(多个状态的变化)：百分比在这里指，动画总时长的占比

@keyframes 动画名称 {
     0%{}
     10%{}
     15%{}
     100%{}
}

第二步：使用动画 animation: 动画名称动画花费时长这两个必须赋值; animation的属性值：动画名称动画花费时长速度曲线延迟时间重复次数动画方向执行完毕时状态。其取值不分先后顺序，如有两个时间第一个表示动画时长，第二个表示y延迟时间；
案例：

      <!DOCTYPE html>
      <html lang="en">
      <head>
         <meta charset="UTF-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <title>1.动画基本使用-两个状态</title>
      </head>
      <style>
         
         /* 1.定义动画 */
         @keyframes change {
            from{width: 200px;}
            to{width: 600px;}
         }

         .box{
            width: 200px;
            height: 100px;
            background-color: pink;
            /* 2.使用动画 */
            animation: change 1s;
         }
      </style>
      <body>
         <div class="box"></div>
      </body>
      </html>

2.动画animation属性的使用

animation可以作为复合属性来用，也可以作为拆分属性来用。
animation 包含以下属性：
动画名称： 定义好的动画名字
动画花费时长： 2s
速度曲线： linear：匀速。
ease：增速播放，先慢后快
ease-in：缓慢开始
steps(3)：分步动画
延迟时间： 1s
重复次数： 数字(具体次数)/infinite(无限次数)
动画方向： normal:以正常的方式播放动画
reverse: 以相反方向播放动画
alternate(常用): 正向+回向
执行完毕时状态 ： backwards(初始状态)、forwards(结束状态)
eg:

animation: change 1s linear;
animation: change 1s steps(3);
animation: change 2s infinite alternate ;

3. 逐帧动画

动画有逐帧动画和补间动画。一般来说常用的是补间动画。
补间动画：连续性的(例如：时钟秒针连续移动)
逐帧动画：有间隔，有步长(例如：时钟秒针，一秒一步长)
逐帧动画,开发中一般配合精灵图实现动画效果

使用steps实现逐帧动画步骤：
1.准备显示区域：设置盒子尺寸是小图的尺寸，背景图为当前精灵图
2.定义动画: 改变背景图位置(移动的距离就j精灵图的宽度)
3.显示动画：添加速度曲线setps(N)，N与精灵图上的小图个数相同，同时添加无限重复效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>5.逐帧动画</title>
</head>
<style>
    @keyframes move {
        from{
            background-position: 0 0;
        }
        to{
            background-position: -1680px 0;
        }
    }

    .box{
        width: 140px;
        height: 140px;
        background-image: url(../images/bg.png);
        animation: move 2s infinite steps(12);
    }
</style>
<body>
    <div class="box"></div>
</body>
</html>

HTML+CSS3笔记(一)-字体、平面转换、渐变、空间转换、动画