【FE学习-CSS】图形以及动画

本文简要记录一些freeCodeCamp里涉及的图形和动画相关内容

Transform⁍

CSS 属性 transform 里面的 scale() 函数可以用来改变元素的显示比例。
- 可以用在:hover上面
skewX()：它使选择的元素沿着 X 轴（横向）倾斜指定的角度。（变成平行四边形那种样子）
rotate()：旋转

图形⁍

创建一个圆形的对象，border-radius 应该被设置成 50%。

新月：利用border-radius和border-shadow

.center {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
  background-color: transparent;
  border-radius: 50%;
  box-shadow: 25px 10px 0px 0px blue;
}

心形：利用伪元素

.heart {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: pink;
  height: 50px;
  width: 50px;
  transform: rotate(-45deg);
}
.heart::before {
  content: "";
  background-color: pink;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  // 注意这里的top和left的计算是transform之前的
  top: 0px;
  left: 25px;
}
.heart::after {
  content: "";
  background-color: pink;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  top: -25px;
  left: 0px;
}

动画⁍

animation-name 用来设置动画的名称，也就是我们稍后要在 @keyframes 里用到的名称。
animation-duration 设置动画所花费的时间。
animation-fill-mode 指定了在动画结束时元素的样式，设置为forwards，保持最后的属性。
@keyframes 可以通过设置特定时间点的行为来创建动画。只需要给持续时间内的特定帧（从 0% 到 100%）加上 CSS 规则。
- 如果只设置0-100%中的一个关键帧，会自动进行一个往返
animation-iteration-count，这个属性允许你控制动画循环的次数，infinite无限
animation-timing-function 用来定义动画的速度曲线。
- 默认值是 ease，动画以低速开始，然后加快，在结束前变慢。
- ease-out：动画以高速开始，以低速结束
- ease-in，动画以低速开始，以高速结束；
- linear：动画从头到尾的速度是相同的。
- 可以用 cubic-bezier 来定义贝塞尔曲线。
  - cubic-bezier 函数包含了 1 * 1 网格里的4个点：p0、p1、p2、p3。其中 p0 和 p3 是固定值，代表曲线的起始点和结束点，坐标值依次为 (0, 0) 和 (1, 1)。你只需设置 另外两点的x 值和 y 值 ，设置的这两点确定了曲线的形状从而确定了动画的速度曲线。在 CSS 里面通过 (x1, y1, x2, y2) 来确定 p1 和 p2。
  - 贝塞尔曲线是在 1*1 的坐标系统内，x 值只能在 0 到 1，但是 y 值是可以大于 1 的。
    1
    2
    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75); // linear animation-timing-function: cubic-bezier(0, 0, 0.58, 1); // ease-out

::before和::after不需要单独设置动画，会随主元素一起动（因为它们本质是主元素中的属性）

常见属性⁍

在元素的 position 已有指定值（如 fixed 或者 relative）时，CSS 偏移属性 right、left、top、bottom 可以用在动画规则里创建动作。
- 定位为relative时，会相对上一个关键帧的位置移动
改变动画元素的 opacity 属性值，实现渐隐。
transform实现缩放或者旋转等
- 注意如果有多个效果A和B，只想改变A，不想改变B，B也要在每个关键帧出现