Question

我在CodeMyUi上玩动画found。

这是我的代码：https://codepen.io/anon/pen/ZxbVgv?editors=1100

Html：

<h1 class="linear-wipe"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam at officiis deserunt aliquid, possimus voluptas mollitia perspiciatis. Minus sed nulla in recusandae quaerat ut, quos obcaecati nihil eligendi, aspernatur quidem?</h1>

<span class="linear-wipe"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Veniam at officiis deserunt aliquid, possimus voluptas mollitia perspiciatis. Minus sed nulla in recusandae quaerat ut, quos obcaecati nihil eligendi, aspernatur quidem?</span>

减：

span{
  border: 1px solid black;
}

.linear-wipe {  
  background: linear-gradient(to right, #00F 20%, #FF0 40%, #FF0 60%, #00F 80%);
  background-size: 200% auto;

  color: #000;
  background-clip: text;
  text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  animation: shine 1s linear infinite;
  @keyframes shine {
    to {
      background-position: 200% center;
    }
  }
}

当文本在多行上并在webkit浏览器中查看时，span元素中会出现问题。示例：http://i63.tinypic.com/15i420g.jpg 将元素显示为inline-bock或block将解决问题，但我的问题是，是否有人可以解释为什么会发生这种情况。

Answer 1

span是标准的内联元素。从历史上看，跨度元素不能用CSS动画。为了给它们制作动画，你需要给予他们是一个展示财产。

了解更多Here和Here

自定义动画仅适用于Chrome / Opera中的内联元素

1 个答案: