一、字体图标

1.1 下载字体图标(了解)

请添加图片描述

1.2 使用字体图标(重点)

引入相关文件(前提)

1、复制相关的文件,到 fonts文件夹里面。
请添加图片描述
2、引入 css

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

1.3 使用类名引入字体图标(重点记住)

如果是一个标签来使用字体文件,可以采取2个类名的形式。(开发最常用)

<span class="iconfont icon-daohangdizhi"></span>
  • 第一个类名 iconfont 目的是告诉这个盒子里面的文字是字体图标。 不是普通的文字。
  • 第二个类名 icon-daohangdizhi, 告诉盒子到底使用哪个小图标。

1.4 使用伪元素字体图标(记住)

<div class="car1">购物车</div>

这样结构比较的清晰,省了很多的小盒子

/*在伪元素前加图标*/ 
.car::before {
    font-family: 'iconfont';
    content: "\e63b";
}
/*在为元素后加图标*/
.car::after {
    font-family: 'iconfont';
    content: "\e686";
}
注意: 使用伪元素字体图标,一定要声明字体。 font-family: "iconfont"

二、变形 transform(2D)

变形可以改变盒子在平面内的形态(位移、旋转、缩放等等)

2.1 位移 translate

translate可以让盒子沿着 x 轴或者 y 轴来移动。
注意:X轴正向为右,Y轴正向为下

transform: translate(x, y);
transform: translateX(x);
transform: translateY(y);
注意:移动的时候可以写百分比,如果使用的百分比,移动的是盒子自身的宽度
transform: translateX(100%);

2.2 盒子水平和垂直

  • 可以让一个子盒子在父盒子里面水平和垂直居中。

1、用外边距法

.box {
    width: 200px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -100px;
    margin-top: 50px;
}

在这里插入图片描述
2、用 translatel 法

.box {
    position: absolute;
    left: 50%;
    top: 50%;
    /*向左上移动50%*/
    transform: translate(-50%, -50%);
}

在这里插入图片描述

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

2.3 开门大吉案例

分析:
①:准备一个大盒子
②:左右两个子盒子
③:鼠标经过,左右两个盒子分别两边拉动
④:鼠标离开,还原
在这里插入图片描述

background-position: left;
background-position: right;
* {
    margin: 0;
    padding: 0;
    /*自动内减*/
    box-sizing: border-box;
}
.box {
    /*解决塌陷*/
    overflow: hidden;
    width: 1366px;
    height: 600px;
    margin: 50px auto;
    background: #98fb98;
}

.box::before,
.box::after {
    content: '';
    width: 50%;
    height: 600px;
    transition: .5s;
}
.box::before {
    float: left;
    background-color: pink;
}
.box::after {
    float: right;
    background-color: purple;
    /* 背景图片右对齐 */
    background-position: right center;
}
.box:hover::before {
    /* 百分比是盒子自身的宽度 */
    transform: translateX(-100%);
}
.box:hover::after {
    /* 百分比是盒子自身的宽度 */
    transform: translateX(100%);
}

2.4 旋转 rotate

旋转可以让盒子旋转角度。

transform: rotate(45deg);    // 一定写单位
如果是正度数,则是顺时针旋转
角度单位是 deg
如果是负度数,则是逆时针旋转

2.5 设置中心点 transform-origin

语法

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

取值

  • 方位名词(left、top、right、bottom、center)
  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算)
/* 设置旋转的中心点位置 */
transform-origin: right bottom;

2.6 多形态变形小技巧

1、如果需要移动,也需要旋转,则一定先写移动,后写旋转, css属性书写顺序影响代码执行。
2、注意,多个值之前用 空格隔开。

transform: translate(-50%, -50%) rotate(360deg);

在这里插入图片描述

2.7 缩放 scale

  • transform: scale(缩放倍数);
  • scale值大于1表示放大, scale值小于1表示缩小
  • 它比这宽度和高度最大的优势: 他是用中心点来进行缩放的,同样他不会影响其他的盒子。
transform: scale(1.2);

2.8 案列在这里插入图片描述

多行文字超出省略:

  • display: -webkit-box;
  • -webkit-box-orient: vertical;
  • -webkit-line-clamp: 2;
  • overflow: hidden;

2.9 渐变背景

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

  • 渐变是多个颜色逐渐变化的视觉效果
  • 一般用于设置盒子的背景
background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))
最后修改:2022 年 04 月 26 日
谢谢老板打赏