05.CSS 缓动变量 && 首字下沉 & 放大缩小动画

在CSS中，我们可以使用--前缀来定义变量，这些变量可以在整个文档中使用。这些变量可以用于保存颜色值、长度值、宽度、高度、字体大小等任何CSS支持的属性值。

首先，我们需要定义一个变量，例如--animation-duration，然后在CSS的其他地方使用这个变量。

解法1：

:root {
  --animation-duration: 500ms;
}
 
.zoomIn {
  animation: zoomIn --animation-duration ease-in-out;
}

在上述代码中，我们首先在:root选择器中定义了一个名为--animation-duration的变量，然后在.zoomIn类中使用了这个变量。

解法2：

:root {
  --animation-duration: 500ms;
  --first-letter: 2em;
  --font-size: 16px;
}
 
p:first-letter {
  font-size: var(--first-letter);
}
 
.zoomIn {
  animation: zoomIn var(--animation-duration) ease-in-out;
}
 
.sans-serif {
  font-family: var(--font-family, sans-serif);
}

在上述代码中，我们定义了三个变量--animation-duration，--first-letter和--font-size，然后在不同的选择器中使用了这些变量。

注意：

• 变量名称对大小写敏感，所以--my-color和--My-color是两个不同的变量。
• 变量必须先定义后使用。
• 变量可以在任何选择器中定义，但只能在元素的子元素中使用。
• 变量可以使用var()函数来使用。

对于首字下沉，我们可以使用::first-letter伪元素来实现。

解法：

p::first-letter {
  font-size: 2em;
  float: left;
}

在上述代码中，我们为p元素的首字母定义了一个2em的字体大小和左侧浮动。

对于放大缩小的动画，我们可以使用CSS的@keyframes规则来定义动画，然后使用animation属性来应用动画。

解法：

@keyframes zoomIn {
  from {
    transform: scale(0.5);
  }
  to {
    transform: scale(1);
  }
}
 
.zoomIn {
  animation: zoomIn 500ms ease-in-out;
}

在上述代码中，我们定义了一个名为zoomIn的动画，这个动画会将元素的大小从0.5放大到1。然后我们将这个动画应用到了.zoomIn类上，动画的持续时间是500ms，动画的速度是ease-in-out。