前端第一天文档

爱吃橙子_
174 阅读3分钟

今日内容字体图标、平面转换、渐变背景

字体图标库

  • 阿里巴巴库
  • icomoon库

下载字体图标包

  1. 首先打开阿里巴巴图标库网站 www.iconfont.cn/home/index?…

  2. 注册登录 选择所需要的字体图标，加入购物车，然后点击购物车，创建一个项目，然后将图标添加至项目，下载到本地

使用方法

  • 引入字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css" />
  • 调用图标对应的类名，必须调用两个类名
  1. iconfont 类: 基本样式，包含字体的使用等
  2. icon-xxx :图标对应的类名
<i class="iconfont icon-hanbao icon1"></i>

伪元素使用字体图标

  1. 首先引入字体图标样式表
<link rel="stylesheet" href="./iconfont/iconfont.css" />

2.其次创建伪元素 在里面添加内容

    p::after{
                content: '\e743';  //content必写属性 然后写iconfont.css所需要图标的代码
                font-family: "iconfont"; //字体样式 必须写 否则无效果
        }

字体图标的优点

  1. 可以随意修改大小，而且不会失真，并且可以修改颜色
  2. 可以像设置文本样式一样对图标进行样式的设置
  3. 轻量级

在线引入字体图标的优点以及使用

使用:

  • 将图标添加进项目 项目会有一个对应的css地址 将它引入我们的html文件 再如上面一样 使用即可 优点：
  1. 不需要将图标的资源文件下载到本地，减少本地项目体积，为以后的项目上线打包做准备
  2. 如果要添加新的图标，不需要重新下载到本地去覆盖源文件

平面转换

使用translate位移

语法： transform:translate(水平移动距离，垂直移动距离);

  • 取值正负均可
  1. 像素单位 向下为y轴的正方向，向右为x轴的正方向
  2. 百分比(参照物为盒子自身尺寸)
  • 技巧
    1. 如果只设置一个值就代表x轴的方向
    2. 它位移不会影响其他元素
    3. transform:translateX & Y ( );
    4. 可以使用定位+ translate完成垂直居中

使用translate位移快速实现绝对定位的元素的居中效果

  • 实现方法
positon:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
  • 注意：位移取值为百分比数值，参考盒子自身尺寸计算移动距离

使用rotate旋转

  • 语法 transform:rotate(角度); //一定要添加deg不然会没效果 注意：角度的单位是deg，默认参照元素的几何中心进行旋转
  • 技巧
  1. 取值为正 则顺时针旋转
  2. 取值为负 则逆时针旋转

转换原点

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

  • 语法 transform-origin:(原点水平位置，原点垂直位置); //默认的原点是盒子中心点 就是几何中心

-取值

  1. 方位名词(left top bottom center) 2.像素单位数值 3.百分比(参照盒子自身尺寸计算)

多重转换

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

  • 语法transform:translate() rotate(); //多个属性 中间用空格分隔
  • 多重转换原理
    1. 旋转会改变网页元素的坐标轴向
    2. 如果先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果
    3. 所以遇到复合属性时，先写位移再写转换

缩放

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

  • 语法 transform:scale(x轴的缩放倍数，y轴的缩放倍数);
  • 技巧
  1. 一般情况下，只为scale设置一个值 表示x轴和y轴的等比例缩放
  2. transform:scale(缩放倍数);//只有一个参数 表示x轴y轴等比例缩放
  3. scale值大于1表示放大，scale小于1表示缩小

渐变背景

background-image:linear-gradient(起始颜色,...中间色,结束颜色);

background-image:linear-gradient([方向],起始颜色,...中间色,结束颜色);
  • []表示不是必写属性 可有可无
  • 方向：to bottom 、 to top 、 to left 、to right
  • 使用角度设置方向 deg 默认是垂直向上，角度是正值 顺时针方向
avatar
文章
阅读
粉丝