css - 带动画的多行文本背景

Question

我想做的是在鼠标悬停时在某些文本后面添加背景色，我已经在此处完成了:

https://jsfiddle.net/95utp3g2/9/

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

有没有办法只用 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