时间戳

首页 > 解决方案 > 多线性扫描向右动画

html - 多线性扫描向右动画

问题描述

如何在多行文本上进行向右扫描动画。我希望它首先在第一行进行动画处理，如果完成，则在第二行进行。我们可以假设我们知道每个文本有多少行。这就是它现在的工作方式，它是单行文本的动画。

    .green-hover {
      background: linear-gradient(to right, green, green);
      background-repeat: no-repeat;
      background-size: 0 50%;
      /* transition: background-size 1s 0s; */
    }
    
    .green-hover:hover {
        animation: myanimation 1s;
    }
    
    @keyframes myanimation {
        0% {
            background-size: 0% 100%;
        }
        100% {
            background-size: 100% 100%;
        }
    }
<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>

标签： htmlcss

解决方案

display应该inline是。你也不需要使用动画。只需使用这样的过渡：

.green-hover {
  display: inline;
  background: linear-gradient(to right, green, green);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size 1s 0s;
}

.green-hover:hover {
  background-size: 100% 100%;
}
<p class="green-hover">130 W Union Street <br> Pasadena, TX 9999</p>

推荐阅读