Javascript 如何在一个jquery中为一段文本添加多个文本阴影；。css（）；

如何在一个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"
     });
}

---

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

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);

在您的情况下，我建议您在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');
}

您可以尝试以下代码：

函数tsec1Anim（）{
$（“#tsec1”）.css({
“字体系列”：“Lucida控制台”，
“字体大小”：“粗体”，
“文本对齐”：“居中”，
“页边距底部”：“12px”，
“顶部”：“0px”，
“颜色”：“0033cc”，
“字体大小”：“75px”，
“文本阴影”：“4px 4px 1px 300000,4px 6px 1px 400000,4px 8px 1px 500000,4px 10px 1px 600000,4px 12px 1px 700000,4px 14px 1px 800000,4px 16px 1px 900000”，
“页边距顶部”：“15px”
});
}

特萨
Klik

我尝试了这个，但是

.myClass

有语法错误，没有work@DamonJenkins什么错误？尝试修复它，添加一堆内联样式只会造成混乱，并降低页面速度。