如何在一个jquery＆＃34; .css（）＆＃34;中为一段文本添加多个文本阴影。

Question

如何在一个jquery＆＃34; .css()＆＃34;？

中为一段文本添加多个文本阴影？

我试图在我的网站上设置页面标题的动画，我已经制作了带有多个阴影的文本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

Answer 2

您可以尝试以下代码：

＆＃13;

＆＃13;

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" : "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",
        "margin-top" : "15px"
        });
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tsec1">Tesa</div>
<div onclick="tsec1Anim()">Klik</div>

＆＃13;

＆＃13;

＆＃13;