Question

我创造了一个小复活节彩蛋。将鼠标悬停在h1标题上时，会创建字母，动画字母会显示在页面底部。我希望在字母之间创建更多的间距作为秋天，这样它们就不会全部融合在一起。

为此，我做了：

                myspan.css({
                    "color" : "Navy",
                    "position": "absolute",
                    "margin" : "20px",
                    "padding" : "20px",
                    "left": $(this).position().left,
                    "top": parent.height()
                });

enter image description here

但它不起作用。有什么想法吗？这是代码：

            $(".title").lettering(); //splits H1 letters into individual spans
            $("h1 span").mouseenter(function () {   

                var colors = ["White"],
                    rand = Math.floor((Math.random()*colors.length-1)+1),
                    string = "National Champs!",
                    letter = string.charAt(index),
                    myspan = $(document.createElement('span')),

                    parent = $(this).parent(),
                    val = $(this);

                if (index >= string.length) {
                    index = 0;
                }
                else {
                    index++;
                }

                myspan.append(letter);
                parent.append(myspan);
                myspan.css({
                    "color" : "Navy",
                    "position": "absolute",
                    "margin" : "20px",
                    "padding" : "20px",
                    "left": $(this).position().left,
                    "top": parent.height()
                });
                myspan.animate({"top": $(window).outerHeight()}, 9000, "linear", function() {
                    $(this).remove();
                });

                val.css({"color" : colors[rand]});

                setTimeout(function() { 
                    val.css({"color" : "black"});
                    val.css({"font-size" : 35}); 
                    //index =0;
                },2000);            
            });

编辑：

我做了

myspan.css({
                    "color" : "Navy",
                    "position": "absolute",
                    "letter-spacing" : "2px",
                    "left": $(this).position().left,
                    "top": parent.height()
                });

这不起作用

Answer 1

使用css属性letter-spacing可能会有所帮助

 letter-spacing:2px

Answer 2

您需要提供letter-spacing的单位，仅2值并不意味着什么。我假设您正在考虑像素，因此在这种情况下将是：

myspan.css({
    "color" : "Navy",
    "position": "absolute",
    "letter-spacing" : "2px",
    "left": $(this).position().left,
    "top": parent.height()
});

请检查一下：https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

复活节彩蛋 - 字母间距

2 个答案: