定位CSS智能手机样机动画

时间：2015-02-17 12:27:07

标签： html css positioning

我尝试用css slidein 做简单的动画。它假设模仿在手机屏幕上滑动的android屏幕截图。

CSS

＆＃13;
＆＃13; 
.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
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

所以我想要我的父母div＆＃34;电话＆＃34;透明的手机照片在前面然后是＃34;容器＆＃34;这将隐藏手机外的屏幕截图，最后将图像隐藏在其他所有内容之外，但我无法使其与z-index一起使用。

任何提示？

非常感谢， w ^

1 个答案:

答案 0 :(得分：1)

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

在这里修复，也许有人会发现它很有用。

<强> CSS

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题