javascript - 如何在 css 或 javascript 中使文本上升或波动(无动画)

Question

如何使一些动态文本在 HTML 中看起来像这样:

我不介意它是用 CSS 还是 Javascript 完成的。 它不应该以任何方式设置动画。

Answer 1

用 CSS 变换来伪造它:

Math.easeInOutSine = function (t, b, c, d) {
  return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
};
var easing = Math.easeInOutSine,
    $target = $('#target'),
    position = $target.position(),
    width = $target.width(),
    height = 100;
$target.html($target.text().split('').map(
  function(char){
    return '<span>'+char+'</span>';
  }
).join(''));
var $chars = $target.children();
$chars.each(function(){
  var $char = $(this),
      w = $char.width(),
      l = $char.position().left,
      offset = easing(l, 0, height, width),
      skew = offset - easing(w + l, 0, height, width),
      angle = Math.atan(skew/w) * 180 / Math.PI;
  offset = -offset;
  $char.css({
    transform: 'translateY('+offset+'px) skewY('+angle+'deg)'
  });
});
$target.css({
  paddingTop: height
});

#target {
  white-space:pre;
  display:inline-block;
}
#target span {
  position:relative;
  display:inline-block;
  transform-origin:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><div id="target">This is a test of the emergency broadcast system.</div></div>

http://codepen.io/ouroborus/pen/mmbzje

我说是假的，因为各个字母不是 flex 的。本质上，曲线被分成线性段，使得它们与放置在那里的 Angular 色一样宽，因此它仅近似于曲线。随着字体大小的增加，这一点变得更加明显。