我是编程的新手，我想让这个漂亮的小猪动画中的Z在Z的正下方有一个框阴影或文本阴影，因此（希望：D）可以给Z赋一个“ 3d -看”。我希望有人可以帮助我，因为当我尝试框阴影时，它不会出现在文本上。当我尝试文本阴影时，它在第一个Z旁边创建了第二个Z，但是它没有对齐，并且在动画中都分别移动。
请帮助
//Pig face position
var elmFace = $("#face").offset();
function snore() {
//Create Z
var elm = document.createElement("span");
//Text
elm.innerText = "Z";
//Set attributes
elm.setattribute("class","z");
//Get positions
posTop = elmFace.top + 20;
posLeft = elmFace.left + ($("#face").width()/2) + 35;
aniTop = posTop - 160;
aniLeft = (posLeft-40) + Math.round(Math.random()*80);
//Style/position it
$(elm).css({
"top": posTop,"left": posLeft
});
//Append
$("body").append(elm);
//Animate
$(elm).animate({
"top": aniTop,"left": aniLeft,"font-size": "60px","opacity": 0
},5000,//Duration
function() { //Function
$(this).remove(); //Remove
});
}
setInterval(snore,1000);
snore();/* -- THE BODY -- */
.body {
}
#face-wrap {
margin: 160px auto 0;
width: 160px;
}
#face {
position: relative;
width: 160px;
height: 160px;
border-radius: 80px;
background: rgb(255,200,200);
transform: rotate(15deg);
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
-o-transform: rotate(15deg);
}
.ear {
position: absolute;
width: 70px;
height: 70px;
border-radius: 35px;
background: rgb(255,200);
}
#ear-l {
left: -20px;
}
#ear-r {
left: +110px;
}
.eye {
top: +75px;
position: absolute;
width: 40px;
height: 4px;
background: rgb(255,250,250);
}
#eye-l {
left: +14px;
}
#eye-r {
left: +100px;
}
#nose {
position: absolute;
top: +75px;
left: +47px;
width: 60px;
height: 60px;
border-radius: 30px;
background: rgb(250,160,160);
}
.nose {
top: +13px;
position: absolute;
width: 7px;
height: 35px;
background: rgb(255,125,125);
}
#nose-l {
left: +16px;
}
#nose-r {
left: +36px;
}
/* -- ZZZzzzz -- */
.z {
position: absolute;
color: black;
font-family: arial;
font-size: 0;
font-weight: bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="face-wrap">
<div id="face" class=" body">
<div id="ear-r" class="ear body"></div>
<div id="ear-l" class="ear body"></div>
<div id="eye-r" class="eye body"></div>
<div id="eye-l" class="eye body"></div>
<div id="nose">
<div id="nose-r" class="nose body"></div>
<div id="nose-l" class="nose body"></div>
</div>
</div>
</div>