day01字体 2D

字体图标

unnicode使用

• 步骤

  1. 引入link：css

  2. i标签承接，写入样式

     ​ <i>&#xe721;</i>

  3. 在style中定义

     i{
             font-family: iconfont;
             /* i标签自带倾斜，取消倾斜 */
             font-style: normal;
             font-size: 100px;
             color: aqua;
           }
     

font-class使用

• 步骤

  1. 引入link:css

  2. 选择类名

     • 第一个类名是固定的：iconfont;
     • 第二个类名：通过demo_index.html文件或者项目主页面复制

  3. 实例

     <i class="iconfont icon-auto ce"></i>
     

• 注意点

  • 有语义的样式不做修改，需要更改样式颜色等，需要另外起类加入

    .ce{
            font-size: 100px;
          } 
    

css3

2D转换

移动

• 语法

  • transform：translate（x，y）

• 注意点

  1. 不影响其他盒子的位置
  2. 可单独设置translateX、translateY，如果不设置且只有一个值，默认水平方向
  3. 取值为百分比时：参照物为盒子自身尺寸
  4. 轴向的正负

• 使用场景

  • 绝对定位居中

• 案例

  • 双开门案例

    • 溢出隐藏

      overflow: hidden;
      

    • 背景图片位置（只要全图的右半部分

      background-position: right;
      

旋转

• 语法

  transform: rotate(360deg);
  

• 注意事项

  • 单位
  • 多个效果连用时连写，单独拆开写会被覆盖

转换中心点

• 使用最多的语法（取值方位名词

  transform-origin: left top;
  

• 注意点

  • 取值百分比(参照于盒子自身尺寸)

缩放

• 语法（宽高等倍数放大

  transform: scale(1.3);
  

渐变

• 主要代码

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

• 华为案例

  • 动态效果（3个）

  • 注意

    • 子绝父相在盒子中的位置
    • 注意华为案例这里，伪元素使用before看不见是因为定位有优先级，它被后面的已经定位的元素覆盖过去了
      • 解决方法：z-index可以提高优先级