自学前端 字体图标和移动属性和背景颜色

85 阅读1分钟

1、字体图标

登录(新浪微博) → 选择图标库 → 选择图标,加入购物车 → 购物车 → 添加至项目 → 下载至本地
1.字体图标的书写方法
  1.Unicode编码

image.png

  2.引入字体图标样式表

image.png

2、transform属性

1.translate (移动) 向右和下给正值,向上和左给负值
    技巧:
       1.如果 translate(一个值) 表示x轴方向的移动,y轴不动
       2.X,Y小写大写都有效果
2.rotate(数字+deg)旋转 顺时针跟时钟一样,给正值 ,负值逆时针
转换原点:transform-origin: 1.方位名词
                            2.具体像素值
                            3.百分比
3.scale(数字不跟单位) 小于一表示缩小,大于一表示放大

4.transform复合写法:tranform: translate() rotate() scale()

3、背景颜色:backgroung-image: linear-geandient();

 背景颜色渐变 bgi   background-image: linear-gradient(参数1, 参数2, 参数3, ....);
    参数1:
      方位:默认的方位从上到下
        1.方位名词:例如:从左到右渐变 to right,从左上到右下渐变 to right bottom
        2.角度deg:直接写度数即可,不用再加to