day01

字体图标Unicode用法：

1.引入iconfont文件夹中的iconfont.css文件

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

2.通过i标签(大部分情况下都是i标签承接字体图标)把unicode编码复制过来 $<i></i>$ 3.声明字体图标库

  i {
    font-family: iconfont;
    font-style: normal;
    color: orange;
    font-size: 100px;
  }

第二种方法，引入iconfont.css文件后直接在标签内填写类名

<i class="iconfont icon-favorites-fill icon1"> </i>

平面转换：

添加过渡

    transition: 2s;

移动

    transform:translate(100%); 单位取百分比是参考的是盒子自身的大小

旋转

    transform：rotate（-45deg）;

转换原点的改变要在盒子本身去设置，不能给hover设置

    transform-origin: left bottom;

缩放

    transform: scale(2);

透明度

    opacity: 1;

固定居中代码

      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

transform 复合属性，复合了平移，旋转，缩放，属性值之间以空格隔开注意点：平移和旋转如果一起使用，必须要先写平移，再写旋转，因为旋转会改变坐标轴的方向

渐变

     background-image: linear-gradient(to right bottom, green, orange);

     background-image: linear-gradient(45deg, green, orange, blue, yellow);
  }

遮罩层效果

     background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.8));

移动端web知识总结

day01

字体图标Unicode用法：

平面转换：