我是编程的新手,我想让这个漂亮的小猪动画中的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, 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>
答案 0 :(得分: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>