Невозможно добавить box-shadow или text-shadow к Z в этой анимации - PullRequest
Новая
       53

Невозможно добавить box-shadow или text-shadow к Z в этой анимации

1 голос
/ 06 ноября 2019

Я новичок в программировании, и я пытаюсь, чтобы у 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

1 Ответ

1 голос
/ 06 ноября 2019

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