2020前端星计划笔记（四）——CSS进阶

2020前端星计划笔记（四）——CSS进阶

1.transform 变形

• 对元素进行平移、旋转、缩放、倾斜

  • translate 平移

    百分数相对于自身大小

  image.png
  • rotate 旋转

#rotate{
           /* 顺时针转30度 */
           transform: rotate(30deg);
       }
       #rotate{
           /* 顺时针转半圈 */
           transform: rotate(0.5turn);
       }
       #rotate{
           /* 绕元素自身左上角顺时针转半圈 */
           transform-origin: 0 0;
           transform: rotate(0.5turn);
       }

• scale 缩放

  
  
  image.png

  • skew 倾斜

    image.png

• transform 不会对其它元素布局产生影响

• 旋转之后坐标轴也旋转了：

image.png

• 3D变形

image.png

`perspective`为距离人眼的距离 ，近大远小

• transition 过渡

  • 指定从一个状态到另一个状态时如何过渡

  • 动画的意义：告诉用户发生了什么

  • transition 属性

    • transition-property

    • transition-duration

    • transition-timing-function

    • transition-delay

  要触发事件才能看到效果：

image.png

属性可以合并：transition:all 1s linear

• 动画样式

  
  
  image.png

可以设置：linear、ease、ease-in、ease-out、ease-in-out、steps(4)

2.animation动画

• 可以实现更复杂的样式变化效果

• 使用方法

  • 定义关键帧样式

  • 应用动画到元素上

image.png

• animation 属性

  • animation-name

  • animation-duration

  • animation-timing-function

  • animation-delay

  • animation-iteration-count

  • animation-direction

3.响应式设计

image.png

设置viewport 可以适配宽度。

• 图片的适配：

  • background-size: cover-------适合展示装饰性的背景图片，不大重要的。始终会覆盖容器，可能被裁切。

  • background-size: contain------适合展示重要的商品图片。始终在容器内，完整显示，但不一定能填充满容器。

• 媒体查询

image.png

• 可以查询的 media
  • width / height
  • device-width / device-height
  • device-pixel-ratio
  • orientation

一个例子：

image.png

• 使用不同的尺寸图片
  
  image.png