如何在 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

Answer 2

您可以试试这个代码：

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

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

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

How can you add multiple text shadows for one piece of text in one jquery ".css()"

html

javascript

css

jquery

onload

JSFiddle Demo

JSFiddle Demo