HTML代码
<div class='me'>
<div class="torso">
<div class="left leg">
<div class="left thigh">
<div class="left shin">
<div class="left foot">
<div class="left toes"></div>
</div>
</div>
</div>
</div>
<div class="right leg">
<div class="right thigh">
<div class="right shin">
<div class="right foot">
<div class="right toes"></div>
</div>
</div>
</div>
</div>
<div class="left arm">
<div class="left bicep">
<div class="left forearm">
<div class="kite"></div>
</div>
</div>
</div>
<div class="right arm">
<div class="right bicep">
<div class="right forearm"></div>
</div>
</div>
</div>
</div>
CSS
.me,.me div{
background-repeat: no-repeat;
position: absolute;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
//-webkit-transform: scale(0.9);
}
.me{
top: 80px;
left: 350px;
-webkit-animation-name: me;
}
.torso{
height: 274px;
width: 86px;
background-image: url("https://s9.postimg.org/41xfy5cin/torso.png");
}
.arm{
left: 12px;
-webkit-transform-origin: 20px 10px;
}
.kite{
width: 395px;
height: 424px;
top: -115px;
left: 0px;
background-image: url("https://s3.postimg.org/ix240ioab/kite.png");
-webkit-transform: rotate(45deg) scale(0.6);
}
.right.bicep{
width: 51px;
height: 124px;
background-image: url("https://s3.postimg.org/mlrszzyb7/right-bicep.png");
}
.left.bicep{
width: 52px;
: 126px;
background-image: url("https://s3.postimg.org/jb3g048dv/left-bicep.png");
}
.left.forearm{
width: 37px;
height: 124px;
background-image: url("https://s3.postimg.org/7ahzze0z7/left-forearm.png");
-webkit-transform: rotate(-45deg);
}
.right.forearm{
width: 36px;
height: 121px;
background-image: url("https://s3.postimg.org/q6noj82ur/right-forearm.png");
-webkit-animation-name: right-forearm;
}
.left.thigh{
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/577krq16b/left-thigh.png");
}
.right.thigh{
width: 69px;
height: 144px;
background-image: url("https://s3.postimg.org/72ud2vq0j/right-thigh.png");
}
.shin{
width: 53px;
height: 173px;
background-image: url("https://s3.postimg.org/3xecqews3/shin.png");
}
.foot{
width: 67px;
height: 34px;
background-image: url("https://s3.postimg.org/l0cj86o37/foot.png");
}
.toes{
width: 28px;
height: 25px;
background-image: url("https://s3.postimg.org/vm0zxxjsj/toes.png");
}
.right.arm{
top: 93px;
-webkit-animation-name: right-bicep;
}
.left.arm{
top: 87px;
-webkit-transform: rotate(-26deg);
}
.forearm{
top: 108px;
left: 14px;
-webkit-transform-origin: 3px 7px;
}
.leg{
left: 6px;
-webkit-transform-origin: 30px 20px;
-webkit-animation-name: thigh;
}
.right.leg{
top: 235px;
-webkit-animation-name: right-thigh;
}
.left.leg{
top:225px;
-webkit-animation-name: left-thigh;
}
.shin{
top: 115px;
-webkit-transform-origin: 30px 25px;
}
.right.shin {
-webkit-animation-name: right-shin;
}
.left.shin {
-webkit-animation-name: left-shin;
}
.foot{
top: 155px;
left: 2px;
-webkit-transform-origin: 0 50%;
}
.right.foot {
-webkit-animation-name: right-foot;
}
.left.foot {
-webkit-animation-name: left-foot;
}
.toes{
top: 9px;
left: 66px;
-webkit-transform-origin: 0% 100%;
}
.right.toes {
-webkit-animation-name: right-toes;
}
.left.toes {
-webkit-animation-name: left-toes;
}
div.right.arm { z-index: 1; }
div.left.arm { z-index: -3; }
div.arm > div.bicep > div.forearm { z-index: -1; }
div.right.leg { z-index: -1; }
div.left.leg { z-index: -2; }
div.leg > div.thigh > div.shin { z-index: -1; }
@-webkit-keyframes me {
0% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
25% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
50% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
75% { -webkit-transform: rotate(5deg) translate(-5px, -14px); }
100% { -webkit-transform: rotate(5deg) translate( 10px, 0px); }
}
@-webkit-keyframes right-bicep {
0% { -webkit-transform: rotate(26deg); }
50% { -webkit-transform: rotate(-20deg); }
100% { -webkit-transform: rotate(26deg); }
}
/*@-webkit-keyframes left-bicep {
0% { -webkit-transform: rotate(-20deg); }
50% { -webkit-transform: rotate(26deg); }
100% { -webkit-transform: rotate(-20deg); }
}*/
@-webkit-keyframes right-forearm {
0% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-65deg); }
100% { -webkit-transform: rotate(-10deg); }
}
/*@-webkit-keyframes left-forearm {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-45deg); }
}*/
@-webkit-keyframes right-thigh {
0% { -webkit-transform: rotate(-45deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(-45deg); }
}
@-webkit-keyframes left-thigh {
0% { -webkit-transform: rotate(10deg); }
50% { -webkit-transform: rotate(-45deg); }
100% { -webkit-transform: rotate(10deg); }
}
@-webkit-keyframes right-shin {
0% { -webkit-transform: rotate(30deg); }
25% { -webkit-transform: rotate(20deg); }
50% { -webkit-transform: rotate(20deg); }
75% { -webkit-transform: rotate(85deg); }
100% { -webkit-transform: rotate(30deg); }
}
@-webkit-keyframes left-shin {
0% { -webkit-transform: rotate(20deg); }
25% { -webkit-transform: rotate(85deg); }
50% { -webkit-transform: rotate(30deg); }
75% { -webkit-transform: rotate(20deg); }
100% { -webkit-transform: rotate(20deg); }
}
@-webkit-keyframes right-foot {
0% { -webkit-transform: rotate(-5deg); }
25% { -webkit-transform: rotate(-7deg); }
50% { -webkit-transform: rotate(-16deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-5deg); }
}
@-webkit-keyframes left-foot {
0% { -webkit-transform: rotate(-16deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-5deg); }
75% { -webkit-transform: rotate(-7deg); }
100% { -webkit-transform: rotate(-16deg); }
}
@-webkit-keyframes right-toes {
0% { -webkit-transform: rotate(0deg); }
25% { -webkit-transform: rotate(-10deg); }
50% { -webkit-transform: rotate(-10deg); }
75% { -webkit-transform: rotate(-25deg); }
100% { -webkit-transform: rotate(0deg); }
}
@-webkit-keyframes left-toes {
0% { -webkit-transform: rotate(-10deg); }
25% { -webkit-transform: rotate(-25deg); }
50% { -webkit-transform: rotate(0deg); }
75% { -webkit-transform: rotate(-10deg); }
100% { -webkit-transform: rotate(-10deg); }
}
请帮我解决这个问题。我调查了有关此问题的其他帖子,但无法纠正它。谢谢
搞砸的不是z-index,而是内部div相对于主.mediv 的相对大小。您.me将其大小调整为原始大小的90%,然后也调整内部所有div的大小,因此最终它们的大小为原始大小的81%。
解决方案:scale仅将应用于.me,而不应用于其中的div。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。