Question

如果单词是CANDY，则字母A和D会淡出，然后剩余的字母C，N，Y将一起移动并填充空格以读取CNY而不是C N Y.

我不确定你是否可以只使用CSS3或者你必须使用JavaScript，但两者都可以。我还想让动画无限循环，让人民币回归到CANDY。

Answer 1

我认为这不是一个好的CSS候选人。我将制作一系列<span>或<div>显示块float：left，每个包含一个字母，并在javascript数组中堆叠每个div或span。然后可能使用jQuery在要删除的字母上运行alpha补间 - 你不能使用fadeOut，因为一旦它们变得不可见，浮动可能就不再起作用了。使用回调到第二个补间，当数组中的左边一个字符完成淡出时，将字母移动一个字符，然后从数组中删除该字符。

Answer 2

定义一个带有动画的类，以应用于要淡入和淡出的字符。动画同时更改为宽度为0，不透明度为0.

我还想让动画无限循环，让人民币回归到CANDY。

这就是animation-iteration-count: infinite和animation-direction: alternate所做的事情。

.fade { 
  animation-name: fade; 
  animation-duration: 3s; 
  animation-iteration-count: infinite;
  animation-direction: alternate;
  display: inline-block;
 }

 @keyframes fade {
  from { width: 1em; opacity: 1; }
  to   { width: 0px; opacity: 0; }
}

C<span class="fade">A</span>N<span class="fade">D</span>Y

动画某些字母从单词中消失，然后其余字母一起移动以填充空白区域

2 个答案: