javascript - 无法向此动画中的 Z 添加框阴影或文本阴影

Question

我是编程新手，我正在尝试让这个漂亮的小 pig 动画中的 Z 在 Z 的正下方有一个框阴影或文本阴影，这样它会(希望 :D)给 Z 一个“3d -看”。我希望有人能帮助我，因为当我尝试 box-shadow 时，它不会出现在文本上。当我尝试 text-shadow 时，它在第一个 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, 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>

https://codepen.io/TomMcPadden/pen/yAblG

Answer 1

text-shadow 对此效果很好。您可能不小心调整了偏移量。

//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, 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;
  text-shadow: 1px 1px 3px pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/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>