JS/CSS-在页面上的原始位置周围移动字母

Question

这是我的第一个问题，我希望我做得很好。

我的目标是具有"神奇的符文效应"，其中每一个文本"浮在"其原始位置，好像它被某种魔术羊皮纸悬挂在空中一样。

简而言之，它将用于游戏。我知道如何在页面上制作"随机漂浮"的东西，例如热气球。但这不是我想做的：我希望这些信件围绕它们的原始位置移动。

到目前为止，我已经尝试了一些东西(您可以在https://jsfiddle.net/3as4omj2/上检查我的小提琴，但我遇到了问题。

(不必担心默认字体和丑陋的aqua背景，用于定位(

function float(element, range, speed) {
    var position = $(element).offset(); 
    $(element).attr( 'original_x', position.left);
    $(element).attr( 'original_y', position.top);
    $(element).attr( 'range', range );
    $(element).attr( 'speed', speed );
    drift(element);
}
function drift(element) {
    var max = Number.parseInt($(element).attr('range'));
    var speed = Number.parseInt($(element).attr('speed'));
    var pos_x = Number.parseInt($(element).attr('original_x'));
    var pos_y = Number.parseInt($(element).attr('original_y'));
    var drift_x = max/2 - Math.floor(Math.random()*max);
    var drift_y = max/2 - Math.floor(Math.random()*max);
    var final_x = pos_x + drift_x;
    var final_y = pos_y + drift_y;
    var total_wait = Math.sqrt(drift_x*drift_x+drift_y*drift_y)*speed;
    $(element).animate({
        left : final_x+"px",
        top : final_y+"px"
    }, total_wait, /*"linear",*/ function(){
        setTimeout(function () {
            drift(element);  
        }, Math.abs(total_wait-Math.floor(Math.random()*150)));
    });
}
$( "#go" ).click(function() {
  float($("#t"),50, 10);
  float($("#e"),50, 10);
  float($("#s"),50, 10);
  float($("#s"),50, 10);
  float($("#t2"),50, 10);
})

到目前为止，这是我的问题：

1. 我无法将我的字母排成一列以形成一个单词(例如，垂直看"测试"，我很想将其视为水平的"测试"(；理想情况下，使用跨度，因此我可以动态添加一个单词或将其删除而无需创建数十个元素。
2. 文字移动了香蕉...我似乎并不了解原因。：(
3. 我希望能够"移动原始位置"，以便我可以进一步动画字母(例如，将一般文本向右移动到右(。
4. 最终，是否有一种方法可以优化用户显示的字体大小？

你们能给我一些建议吗？

预先感谢您。

Answer 1

您可以尝试使用CSS3动画，使用:nth-of-type()选择器为每个字母设置自定义动画延迟。要更好地了解所有动画属性，请参见此文档。其余的都是调整translate值的问题。

---

如果确定了足够的确定，则为每个字母创建自定义@keyframes也是一个选项。

.runes span {
  position: relative;
  display: inline-block;
  padding: 10px;
  background: aqua;
  animation-duration: 2s;
  animation-name: float;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
}
.runes span:nth-of-type(1) {
  animation-delay: .3s;
}
.runes span:nth-of-type(2) {
  animation-delay: .4s;
}
.runes span:nth-of-type(3) {
  animation-delay: .5s;
}
.runes span:nth-of-type(4) {
  animation-delay: .7s;
}
@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(8px, 0);
  }
  50% {
    transform: translate(0, 8px);
  }
  75% {
    transform: translate(5px, 5px);
  }
}

<section class="runes">
  <span>T</span>
  <span>E</span>
  <span>S</span>
  <span>T</span>
</section>