부활절 달걀 - 글자 간격

Question

나는 작은 부활절 달걀을 만들었습니다. h1 제목 위로 마우스를 이동하면 글자가 만들어지고 애니메이션 글자가 페이지 아래쪽에 표시됩니다. 글자들 사이에 더 많은 간격을 만들어서 가을과 같이 만들었 으면 좋겠어.

는이를 위해 내가 그랬어 :

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

그러나 그것은 작동하지 않았다. 이견있는 사람?

이

  $(".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);    
      }); 

---

편집 : 여기에 코드는 제가 CSS를 atrribute를 사용

Answer 1

를 작동하지 않았다

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

이

했다

가 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