Javascript JS/CSS-在页面上围绕其原始位置移动字母

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

我的目标是产生一种“神奇的符文效果”，文本中的每个字母都“漂浮”在其原始位置上，就像它悬浮在半空中的某种神奇羊皮纸上一样

简单地说，它将用于一个游戏。我知道如何让某个东西“随意飘浮”在页面上，比如热气球；但这并不是我想要做的：我希望这些字母在它们原来的位置上移动

到目前为止，我已经尝试了一些东西（你可以查看我的小提琴），但我遇到了问题

（不要担心默认字体和难看的浅绿色背景，它用于定位）

以下是我目前面临的问题：

我不能把字母排列成一个单词（比如，“TEST”是垂直的，我想把它看作是水平的“TEST”）；理想情况下，使用span，这样我就可以动态添加或删除一个单词，而无需创建几十个元素

文本移动到香蕉。。。我似乎不明白为什么(

我希望能够“移动原始位置”，这样我可以进一步设置字母的动画（例如，从左向右移动一般文本）

最终，是否有一种方法可以优化用户显示的字体大小

你们能给我一些建议吗

---

提前谢谢。

您可以尝试改用CSS3动画，使用

：nth-of-type（）

选择器为每个字母设置自定义动画延迟。要更好地了解所有动画属性，请参见此。其余的都是调整

translate

值的问题

---

如果您有足够的决心，为每个字母创建自定义的关键帧也是一个选项

.runes span{
位置：相对位置；
显示：内联块；
填充：10px；
背景：水；
动画持续时间：2秒；
动画名称：float；
动画迭代次数：无限；
动画方向：交替；
动画计时功能：轻松进出；
}
.符文跨度：第n个类型（1）{
动画延迟：.3s；
}
.符文跨度：第n个类型（2）{
动画延迟：.4s；
}
.符文跨度：第n个类型（3）{
动画延迟：.5s；
}
.符文跨度：第n个类型（4）{
动画延迟：.7s；
}
@关键帧浮动{
0% {
变换：平移（0,0）；
}
25% {
转换：转换（8px，0）；
}
50% {
转换：转换（0，8px）；
}
75% {
转换：转换（5px，5px）；
}
}

T
E
s
T

非常感谢！您的解决方案优雅而简单，我非常喜欢。如何使位移随机？我不认为使用CSS可以使其完全随机。不过，您可以通过添加不同的

@关键帧使其看起来随机。
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);
})