Question

我想要做的是在悬停时在一些文字后面添加背景颜色，我已经在这里做了：

有没有办法动画背景颜色，使其从左到右逐行显示？我的意思是，在悬停时，背景应仅在第一行从左到右动画。然后，几毫秒之后，背景应为第二行设置动画。然后几毫秒之后，背景应为第三行设置动画。

有没有办法只使用CSS？

HTML：

<div class="container">
  <div class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, eiusmod tempor incididunt.</div>
</div>

CSS：

body {
  margin: 50px;
}

.container {
  display: block;
  width: 250px;
}

.text {
  font-family: "Arial";
  font-size: 16px;
  font-weight: bold;
  display: inline;
  line-height: 26px;
}

.text:hover {
  background: gold;
  padding: 2px 0;
}

Answer 1

我最接近~~，仍然需要一些1x1px图像（因为显然线性渐变还不能动画），~~是为了确保每一行都是特定尺寸的（从您现有的CSS看起来似乎没问题），然后使用具有特定大小的多个背景，并使用一些@keyframe动画为其背景位置设置动画。我添加的相关CSS：

.text {
  display: block;
  background: linear-gradient(red, red), linear-gradient(green, green), linear-gradient(red, red);
  background-size: 250px 26px, 250px 26px, 250px 26px;
  background-position: -250px 0, -250px 26px, -250px 52px;
  background-repeat: no-repeat, no-repeat, no-repeat;
}    

.text:hover {
  animation: myanim 2s;
  background-position: 0 0, 0 26px, 0 52px;
}

@keyframes myanim {
  0% {
    background-position: -250px 0, -250px 26px, -250px 52px;
  } 
  33% {
    background-position: 0 0, -250px 26px, -250px 52px;
  }
  67% {
    background-position: 0 0, 0 26px, -250px 52px;
  }
  100% {
    background-position: 0 0, 0 26px, 0 52px;
  }
}

<强> Fiddle

多行文本背景与动画

1 个答案: