her~~llo，我是你们的好朋友Lyle，是名梦想成为计算机大佬的男人！

博客是为了记录自我的学习历程，加强记忆方便复习，如有不足之处还望多多包涵！非常欢迎大家的批评指正。

目录

一、字体图标

1.1 使用字体图标-Unicode编码：

1.2 使用字体图标–类名：引入字体图标样式表

二、平面转换

2.1 位移

2.1.1 绝对定位居中

2.1.2 双开门

2.2 旋转

2.2.1转换原点

2.3 多重转换

2.4 缩放

三、渐变

四、空间转换（配合透视效果好）

4.1 空间位移

4.2 透视

4.3 空间旋转

4.4 立体呈现

3D导航

4.5 空间缩放

五、动画

动画属性

---

一、字体图标

目标：使用字体图标技巧实现网页中简洁的图标效果

字体图标

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

字体图标的优点：

• 灵活性：灵活地修改样式，例如：尺寸、颜色等
• 轻量级：体积小、渲染快、降低服务器请求次数
• 兼容性：几乎兼容所有主流浏览器
• 使用方便：   1.下载字体包       2.使用字体图标

图标库lconfont：iconfont

下载字体包：登录→选择图标库→选择图标，加入购物车→购物车→添加至项目→下载至本地

1.1 使用字体图标-Unicode编码：

①引入样式表：iconfont.css

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

②复制粘贴图标对应的Unicode编码

③设置文字字体

<style>
    span{
        font-family: 'iconfont';
    }
</style>

1.2 使用字体图标–类名：引入字体图标样式表

①引入字体图标样式表

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

• iconfont类：基本样式，包含字体的使用等
• icon-xxx：图标对应的类名

<span class="iconfont icon-quanbu"></span>

二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

平面转换

• 改变盒子在平面内的形态（位移、旋转、缩放）
• 2D转换

平面转换属性

• transform

语法：

transform: translate(水平移动距离, 垂直移动距离);

取值（正负均可）：

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

注意：X轴正向为右，Y轴正向为下

技巧：

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

2.1 位移

2.1.1 绝对定位居中

核心代码：

div {
    background-color: #000;
    position: absolute;
    width: 200px;
    height: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

原理:

位移取值为百分比数值，参照盒子自身尺寸计算移动距离

2.1.2 双开门

核心代码：

        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('C:\\Users\\13792\\Desktop\\bg.jpg');
            overflow: hidden;
        }
        .box::after,.box::before
        {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(C:\\Users\\13792\\Desktop\\fm.jpg);
        }
        .box::after{
            background-position: right;
        }
        .box:hover::after{
            transition: 1s;
            transform: translate(100%);
        }
        .box:hover::before{
            transition: 1s;
            transform: translate(-100%);
        }

background-position:right;

• left：向左侧移动自身宽度
• right：向右侧移动自身宽度

2.2 旋转

目标：使用rotate实现元素旋转效果

语法：

transform: rotate(角度);

注意：角度单位是deg

取值：正负均可

技巧：

• 取值为正, 则顺时针旋转
• 取值为负, 则逆时针旋转

2.2.1转换原点

目标：使用transform-origin属性改变转换原点

语法：

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

取值：

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

2.3 多重转换

目标：使用transform复合属性实现多形态转换

transform: translate() rotate();

多重转换原理

• 旋转会改变网页元素的坐标轴向
• 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

2.4 缩放

目标：使用scale改变元素的尺寸

思考:改变元素的width或height属性能实现吗？

语法：

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

技巧：

• 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
• transform:scale(缩放倍数);
• scale值大于1表示放大, scale值小于1表示缩小

三、渐变

目标：使用background-image属性实现渐变背景效果

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

background-image: linear-gradient(transparent,rgba(200, 200, 1, 0.6))
background-image: linear-gradient(颜色1,颜色2)

四、空间转换（配合透视效果好）

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

空间：是从坐标轴角度定义的。x 、y 和z三条坐标轴构成了一个立体空间，z轴位置与视线方向相同。

空间转换也叫3D转换

属性：transform

4.1 空间位移

目标：使用translate实现元素空间位移效果

语法：

transform: translate3d(x, y, z);
transform: translateX(值);
transform: translateY(值);
transform: translateZ(值);

取值（正负均可）：

• 像素单位数值
• 百分比

4.2 透视

目标：使用perspective属性实现透视效果

属性（添加给父级）

• perspective:值;
• 取值：像素单位数值，数值一般在800–1200。

作用

• 空间转换时，为元素添加近大远小、近实远虚的视觉效果

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

4.3 空间旋转

目标：使用rotate实现元素空间旋转效果

语法：

transform:rotateZ(值);
transform:rotateX(值);
transform:rotateY(值);

左手法则：

• 判断旋转方向: 左手握住旋转轴, 拇指指向正值方向, 手指弯曲方向为旋转正值方向

拓展：

rotate3d(x, y, z, 角度度数)：

用来设置自定义旋转轴的位置及旋转的角度，x，y，z取值为0-1之间的数字立体呈现 

4.4 立体呈现

目标：使用transform-style: preserve-3d呈现立体图形

思考：使用perspective透视属性能否呈现立体图形？

答：不能，perspective只增加近大远小、近实远虚的视觉效果。

实现方法：

• 添加transform-style: preserve-3d;
• 使子元素处于真正的3d空间

呈现立体图形步骤

1.盒子父元素添加transform-style: preserve-3d；

2.按需求设置子盒子的位置（位移或旋转）

注意：

• 空间内，转换元素都有自已独立的坐标轴，互不干扰

3D导航

目标：使用立体呈现技巧实现3D导航效果

实现思路

1.搭建立方体：绿色盒子是立方体的前面，橙色盒子是立方体的上面

        li标签

                添加立体呈现属性transform-style: preserve-3d;

                添加旋转属性（为了便于观察效果，案例完成后删除即可）

        a标签

                a标签定位（子绝父相）

                英文部分添加旋转和位移样式

                中文部分添加位移样式

2.添加hover状态旋转切换效果

        鼠标滑过li，添加空间旋转样式

        li添加过渡属性

注意：案例完成后，删除li的旋转样式。

4.5 空间缩放

目标：使用scale实现空间缩放效果

语法：

transform: scaleX(倍数);
transform: scaleY(倍数);
transform: scaleZ(倍数);
transform: scale3d(x, y, z);

五、动画

目标：使用animation添加动画效果

思考：过渡可以实现什么效果？

答：实现2个状态间的变化过程

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

动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或动画帧

实现步骤：

①定义动画（在<style>里）

• from to 只能实现两种状态
• 10%  25%  60% 100% 可以多状态

        @keyframes change {
            from {
                width: 200px;
            }
            to {
                width: 1366px;
            }
        }
        @keyframes change2 {
            10% {
                width: 200px;
            }
            20% {
                width: 400px;
            }
            50% {
                width: 800px;
            }
            100% {
                width: 1366px;
            }
        }

②使用动画

animation:动画名称 动画时间

动画属性

目标：使用animation相关属性控制动画执行过程

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

注意：

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

属性	作用	取值
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使用

l逐帧动画：帧动画。开发中，一般配合精灵图实现动画效果。

animation-timing-function:steps(N)；

将动画过程等分成N份