Dummy CSS - 文字背景動畫

最近看到一个网站挺有意思，叫 code my ui, 其中一个部分介绍四百多个纯css效果的例子，每一个例子都有codepen，对学习css大有帮助。但仅仅看是没用的，我之前看过不少coco的css文章和codingStartup起码课的b站视频，最后结果是：

shocked

看的时候，觉得都懂，真的灵活运用就傻了。所以我打算做一个系列，叫Dummy CSS, 讲解里面的例子，要做到连css菜鸟都能看懂的，（当然，读者也得要懂基本的css知识），表示自己真的把知识学透了。正如物理学家费曼所说的：“如果你不能向其他人简单地解释一件事，那麽你就是还没有真正弄懂它。”

这是这系列的第一篇文章，我先用一个简单的例子小试牛刀。

静态效果

example

codepen示例

首先把元素和静态时的样式实现出来，很简单，一个flex布局就搞定了：

html:

<div class="wrapper">
  <h1 class="hover-text">Hover Me</h1>
</div>
复制代码

css:

.wrapper {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center
}

.hover-text {
  font-size: 5rem;
}
复制代码

现在把文字垂直居中，还要把背景弄出来，因为之后我们要操控背景移动，所以不要直接用background，而是用一个伪元素来完成，把它舖满文字，居于文字后面就可以了。

要把它舖满，可以给它宽高百分百，也可以用绝对定位，然后给它的top, bottom, left, right为0, 这样就舖满，为什么这四个属性为0就舖满？你想想，你要一个元素相对于某元素最顶又要最低，而且最左又要最右，自然是舖满它才有可能的。

居于文字后面就简单啦，用z-index: -1就可以了：

.hover-text {
  position: relative;
}

.hover-text:before {
  content: " ";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: hsl(200 100% 80%);
  z-index: -1;
}
复制代码

结果如下：

萤幕快照 2021-09-30 下午11.17.54.png

codepen示例

动态背景

现在要去实现动态背景，当我们把鼠标放到文字时，背景过渡显示出来，否则就消失。要做动态效果，首先想到的是transition和animation这两个属性，简单的动画用transition足够了。

因为我们要为背景做动态效果，所以把transition放在伪元素里，而且一般情况下要把背景隐藏，可以用transform: scale(0)来实现，当鼠标在文字上，transform: scale(1)用背景就显示出来，结果如下：

hover(2).gif

codepen示例

现在的问题是背景从中心向四周展现出来，消失时则向中心收缩，而不是向左边开始水平展现，消失时则从右边消失。如果希望背景水平展现，可以用scaleX来替代scale，表示只向x轴，即水平方向拉伸。而要改变transform的开始位置，可以用 transform-origin 来调整。我们希望鼠标在文字时，背景从左出现，所以在.hover-text:hover::before添加transform-origin: left;，然后从右消失就是在.hover-text::before添加transform-origin: right;。

最后结果可以看codepen示例。