前端字体图标的使用及transform知识点

88 阅读1分钟

字体图标的使用: 分为网页法和下载法

  • 下载法: 首先下载阿里的字体图标,解压后引入到自己的文件的根目录下,如果用 标签需要将字体图标中关键词引入的如:

image.png ,并引入已经link的iconfont的类名,即可 伪元素也是需要如:content: '\e621'; font-family: 'iconfont'; 需要写这连个样式即可

  • 网页法:不需要下载,直接在阿里中寻找自己需要的字体并放入自己创建的项目中,生成在线的网址,并引入到html中如: image.png 后续做法和以上一样;

transform(变换) transform值有

  • 位移:translateX()属性有:translateY(),tranalateZ(), translate(X,Y,Z)如果里面只写一个值得话默认为X,应用:盒子水平垂直居中
  • 旋转:rotate()属性有:rotate();如果值为负数则反方向旋转,正值则相反,单位是(deg)
  • 缩放:scale()属性值:scale(x,y),注意:不带单位,默认scale(1,1) 如果只写一个数值表示等比例缩放
  • opacity(透明度)属性:属性值是[0-1]之间且包括0和1;如果等于0表示完全透明,1表示完全不透明
  • 多行文字超出显示省略号: display:-wekit-box; -weblit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; 渐变: background-image:linear-gradient(); 如: image.png 转换原点:transform-origin() 属性:默认为盒子的中心点 取值:

image.png

image.png