web进阶学习笔记

web进阶

day01 字体平面转换

1.字体图标

只一个字体，处理简单的，单一的图片，精灵图则稍微处理复杂的图片

1.1特点

• 灵活性 轻量级 兼容新
• 下载字体包->使用即可
• 对于没有图标将 svg后缀文件 的上传 后下载 网址:https://www.iconfont.cn

1.2使用

• 引入图标的css iconfont.css 文件
• 引入类名即可使用(两个类名) 属性与文字的属性相同

案例:淘宝购物车小案例

2.平面转换

改变盒子的形态（ 缩放 位移 旋转）又称2D转换

2.1 移动：

​ transform :translate( x , y )

• 取值可以是百分比 也可以是数字 正负两个方向均可 样式的层叠行 按照最后一个生效

• 一个方向的移动：translateX translateY 或者translate 写一个值

• 移动都是以盒子坐上角的点开始算起

案例：双开门图片移动 (伪元素必须设置 content 属性 此案能被看见)

2.2 旋转：

• 旋转必须单配 过渡使用 transition ：all 时间

• transform: rotate(); 旋转的角度是deg 正值顺时针

2.21 旋转原点

转换原点：默认盒子的中心点旋转

转换原点更换：

• tansfrom-origin（x,y） 原点的水平位置 原点的垂直位置
• 取值 left / right / top/ buttom /center 直接写在标签上即可

2.22 多重转换：

transform: translateX() rotate(); 旋转平移同时进行 先位移后旋转
前后有顺序：旋转该改变轴向，位移方向转变 一般旋转放在最后

案例：滚轮胎

2.3 放大：

transform: scale(x,y);
一般写一个属性 等比例放大/缩小 大于1 放大 反之 缩小
放大/缩小 知识倍数 没有单位

案例： 王者荣耀图标的变化 定位的时候（如果使用的是 移动属性 注意 transfrom 的综合属性）

3.背景渐变

background-image: linear-gradient(颜色1，颜色2，yanse3);

半透明的渐变：

      background-image: linear-gradient(
​        transparent,  //半透明
​        rgba(0,0,0,0.3)
​      );

案例： 产品展示显示阴影 /* hover 属性后边直接写伪元素属性 */
​ .box:hover::after{ }

4.综合案例

模拟华为 实现图片文字的 联动显示
显示目标:字体图标 渐变背景 图片缩放效果 文字位移

4.1 绝盒中心居中

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

---

day02动画3D转换

1.空间转换

改变元素在空间的 位移 旋转 缩放 z轴的方向与视线的方向相同  z轴正值指向自己 负值指向屏幕里边

1.1位移

• transform: translate3d(x,y,z); 综合写法 取值范围0-2
• transform: translateX(100px); 分开属性
• transform: translateY(100px);
• transform: translateZ(100px);

1.2旋转

• transform: rotateZ(360deg); z轴旋转效果与 中心点的旋转效果相同
• transform: rotateX(60deg); 搭配透视属性 类似手掌的前后翻转
• transform: rotateY(60deg); 搭配透视属性 类似开门效果

左手法则:左手握住旋转轴 大拇指的方向正值的方向 手指弯曲方向为正值方向

3d立体显示:
属性: transform-style: preserve-3d; 父级添加后,子集自动开启3d模式， 同时搭配透视效果显示
案例:3d导航

• ul 存在默认的边距
• 用 :first-child实现不同a 标签的颜色
• 开始空间旋转前:整体2d旋转好看位置变化 transform: rotateX(-20deg) rotateY(30deg);

1.3 3d缩放

transform: scale3d(0.6,1.2,2); 取值范围0-2
单独设置 某一个具体的位置属性

1.4透视:

• 原理:透视数值 又称视距(人眼到屏幕的距离) 近大元小
• z轴的不显示,正值盒子向我们走来,负值盒子离我们而去,产生近实远虚效果
• 透视效果: perspective: 经验取值 800-1200 单位像素,添加给父级盒子

2动画(重点)

实现多个状态之间的变化 可以远程控制
实质依旧是大量的图片快速播放 实现连续的播放 动画效果

2.1定义动画:

两个状态定义 动画的开始状态和盒子的默认位置相同,from可以省略

@keyframes 动画名{
   
    from{
    }
    to{
     }
}

多个状态定义 百分比的形式 0-100% 是动画的总时常 中间区分的多个不同状态

  @keyframes 动画名字 {
      
    0% {
   }
    50% {
   }
    100% {
   }
}

2.2使用动画:

谁使用动画,给谁添加, animation:动画名字 , 动画名称

2.3动画符合属性

• animation: name duration timing-function delay iteration-count direction fill-mode;
• animation:动画名 动画时常 速度曲线 延迟时间 重复次数 动画方向 动画执行完毕状态; 取值没有先后

动画属性分开属性:

• animation-name/duration/timing-function/delay/iteration-count/direction/fill-mode;
• animation-fill-mode:执行完毕的状态 默认的开始状态backwards 结束状态forwards 前提是没有infinite
• animation-timing-function: step(n) 动画分为几步完
• animation-iteration-count: infinite 无线循环
• animation-direction: alternate 动画方向反向来回效果
• animation-paly-state:paused 暂停动画 配合hover

2.4 补间动画

逐帧动画:动画之间的间隔过去 steps() 配合精灵图使用,:动画之间的完整过渡