html - CSS 智能手机模型动画的定位

Question

我正在尝试使用 css slidein 制作简单的动画。想模仿安卓手机屏幕截图滑动。

CSS

.phone {
	background: url("https://github.com/wojstu/CookingConnection/blob/4ee14ba85cb82dbfe803003d490a9c00705a0664/assets/images/dummie.png?raw=true") no-repeat;
	position: relative;
	display: block;
	width: 326px;
	height: 600px;
	overflow: hidden;
	margin: 0px auto;
	top: 50px;
	z-index: 1;
	
}
.screens {
	position: absolute;
	-webkit-animation-duration: 1s;
	-webkit-animation-name: slidein;
	animation-duration: 1s;
	animation-name: slidein;
	z-index: 3;
	
}
@-webkit-keyframes slidein {
	from {
		margin-left: 100%;
		
	}
	to {margin-left: 0%;
		
	}
}
@keyframes slidein {
	from {
		margin-left: 100%;
		
	}
	to {margin-left: 0%;
		
	}
}


img:nth-child(5){-webkit-animation-delay:0s;animation-delay:0s; z-index: 3}
img:nth-child(4){-webkit-animation-delay:4s;animation-delay:4s;z-index: 3}
img:nth-child(3){-webkit-animation-delay:8s;animation-delay:8s;z-index: 3}
img:nth-child(2){-webkit-animation-delay:12s;animation-delay:12s;z-index: 3}
img:nth-child(1){-webkit-animation-delay:16s;animation-delay:16s;z-index: 3}
.container {
	position: relative;
	width: 278px;
	height: 100%;
	border-top: 54px solid red;
	border-left: 24px solid red;
	border-right: 24px solid red;
	z-index: 2;
}
.hug {
  background: #fff;
  width: 100%;
  height: 670px;
  margin: 0;
  
}

HTML

<div class="hug">
  <div class="phone">
  			<div class="container">
			    <img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen recipes">
    			<img class="screens" src="https://photos-4.dropbox.com/t/2/AAAzqAwwCgdn0-B0tstddE0ueqjYzqx-PfWLE79LyoDbLQ/12/230572008/png/1024x768/3/1424178000/0/2/2.png/COj_-G0gASACIAMoASgC/NRZlT8kh2xyq71IsnL6PEQ7LWsd2tBftLLT4o_-fIBA" alt="android app screen overview">
			    <img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen ingridients">
			    <img class="screens" src="https://photos-4.dropbox.com/t/2/AAAzqAwwCgdn0-B0tstddE0ueqjYzqx-PfWLE79LyoDbLQ/12/230572008/png/1024x768/3/1424178000/0/2/2.png/COj_-G0gASACIAMoASgC/NRZlT8kh2xyq71IsnL6PEQ7LWsd2tBftLLT4o_-fIBA" alt="android app screen recipe">
    			<img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen steps">
			   </div>
		</div>
</div>

http://codepen.io/anon/pen/pvLoVJ

所以我想让我的父 div“phone”在前面有透明的手机照片，然后是“container”，它将屏幕截图隐藏在手机外面，最后是图像在其他所有东西下面，但我不能让它与 z-index 一起使用.

有什么提示吗？

非常感谢， W

Answer 1

好的，所以我能够自己解决它:D 事实证明，我需要通过 z-index 组织元素的顺序并使用负值来做到这一点。

这是修复方法，也许有人会发现它有用。

CSS

.phone {
  background: url("https://github.com/wojstu/CookingConnection/blob/4ee14ba85cb82dbfe803003d490a9c00705a0664/assets/images/dummie.png?raw=true") no-repeat;
  position: relative;
  display: block;
  width: 326px;
  height: 600px;
  overflow: hidden;
  margin: 0px auto;
  top: 50px;
}
.screens {
  position: absolute;
  margin-left: 100%;
  -webkit-animation-duration: 5s;
  -webkit-animation-name: slidein;
  animation-duration: 5s;
  animation-name: slidein;
}
@-webkit-keyframes slidein {
  0% {
    margin-left: 100%;
  }
  20% {
    margin-left: 0.001%;
  }
  100% {
    margin-left: 0%;
  }
}
@keyframes slidein {
  0% {
    margin-left: 100%;
  }
  20% {
    margin-left: 0.001%;
  }
  100% {
    margin-left: 0%;
  }
}
img:nth-child(1) {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
  z-index: -1;
}
img:nth-child(2) {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  z-index: -1;
}
img:nth-child(3) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
  z-index: -1;
}
img:nth-child(4) {
  -webkit-animation-delay: 15s;
  animation-delay: 15s;
  z-index: -1;
}
img:nth-child(5) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
  z-index: -1;
}
.container {
  position: relative;
  width: 278px;
  height: 100%;
  padding-top: 54px;
  padding-left: 24px;
  padding-right: 24px;
}

<div class="hug">
  <div class="phone">
    <div class="container">
      <img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen recipes">
      <img class="screens" src="https://photos-4.dropbox.com/t/2/AAAzqAwwCgdn0-B0tstddE0ueqjYzqx-PfWLE79LyoDbLQ/12/230572008/png/1024x768/3/1424178000/0/2/2.png/COj_-G0gASACIAMoASgC/NRZlT8kh2xyq71IsnL6PEQ7LWsd2tBftLLT4o_-fIBA" alt="android app screen overview">
      <img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen ingridients">
      <img class="screens" src="https://photos-4.dropbox.com/t/2/AAAzqAwwCgdn0-B0tstddE0ueqjYzqx-PfWLE79LyoDbLQ/12/230572008/png/1024x768/3/1424178000/0/2/2.png/COj_-G0gASACIAMoASgC/NRZlT8kh2xyq71IsnL6PEQ7LWsd2tBftLLT4o_-fIBA" alt="android app screen recipe">
      <img class="screens" src="https://photos-5.dropbox.com/t/2/AAC0izdgVVhy4roLbIoBFpxnqY7zP-Fxqq4D8c8juTEvlA/12/230572008/png/1024x768/3/1424178000/0/2/1.png/COj_-G0gASACIAMoASgC/SCXUOHO1qm4114kk-50_B6i80denUQ2TC2YrV5Q83tQ" alt="android app screen steps">
    </div>
  </div>
</div>