javascript - 如何在一个 jquery ".css()"中为一段文本添加多个文本阴影

Question

如何在一个 jquery ".css()"中为一段文本添加多个文本阴影？

我正在尝试为我网站上的页面标题制作动画，我已经将文本制作成具有多个阴影的 3D，并且我想更改它在页面加载时的颜色。

这是我目前拥有的:

//Animates section 1 of mainpage title
function tsec1Anim(){
    $("#tsec1").css({
        "font-family" : "Lucida Console",
        "font-weight" : "bold",
        "text-align" : "center",
        "margin-bottom" : "12px",
        "top" : "0px",
        "color" : "#0033cc",
        "font-size" : "75px",
        "text-shadow" : "0px 1px 0px #002eb8",
        "text-shadow" : "0px 2px 0px #0029a3",
        "text-shadow" : "0px 3px 0px #00248f",
        "text-shadow" : "0px 4px 0px #001f7a",
        "text-shadow" : "0 5px 0 #001a66",
        "text-shadow" : "0 6px 1px rgba(0,0,0,.1)",
        "text-shadow" : "0 0 5px rgba(0,0,0,.1)",
        "text-shadow" : "0 1px 3px rgba(0,0,0,.4)",
        "text-shadow" : "0 3px 5px rgba(0,0,0,.50)",
        "text-shadow" : "0 5px 10px rgba(0,0,0,.80)",
        "text-shadow" : "0 10px 10px rgba(0,0,0,.60)",
        "text-shadow" : "0 20px 20px rgba(0,0,0,.75)",
        "margin-top" : "15px"
     });
}

Answer 1

首先，要有多个文本阴影，请用逗号分隔它们:

text-shadow: 0 0 5px black, 0 0 10px red;

根据您的编码，总计为:

text-shadow: 0px 1px 0px #002eb8,
         0px 2px 0px #0029a3,
         0px 3px 0px #00248f,
         0px 4px 0px #001f7a,
         0 5px 0 #001a66,
         0 6px 1px rgba(0,0,0,.1),
         0 0 5px rgba(0,0,0,.1),
         0 1px 3px rgba(0,0,0,.4),
         0 3px 5px rgba(0,0,0,.50),
         0 5px 10px rgba(0,0,0,.80),
         0 10px 10px rgba(0,0,0,.60),
         0 20px 20px rgba(0,0,0,.75);

JSFiddle Demo

在你的情况下，我真的建议在你的 jquery 中使用 addClass()，它更容易:

      .myClass{
     font-family : Lucida Console;
            font-weight : bold;
            text-align : center;
            margin-bottom : 12px;
            top : 0px;
            color : #0033cc;
            font-size : 75px;
            text-shadow: 0px 1px 0px #002eb8,
             0px 2px 0px #0029a3,
             0px 3px 0px #00248f,
             0px 4px 0px #001f7a,
             0 5px 0 #001a66,
             0 6px 1px rgba(0,0,0,.1),
             0 0 5px rgba(0,0,0,.1),
             0 1px 3px rgba(0,0,0,.4),
             0 3px 5px rgba(0,0,0,.50),
             0 5px 10px rgba(0,0,0,.80),
             0 10px 10px rgba(0,0,0,.60),
             0 20px 20px rgba(0,0,0,.75);
            margin-top : 15px;
    }
function tsec1Anim(){
    $("#tsec1").addClass('myClass');
}

JSFiddle Demo