我尝试用css slidein 做简单的动画。它假设模仿在手机屏幕上滑动的android屏幕截图。
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>
&#13;
http://codepen.io/anon/pen/pvLoVJ
所以我想要我的父母div&#34;电话&#34;透明的手机照片在前面然后是#34;容器&#34;这将隐藏手机外的屏幕截图,最后将图像隐藏在其他所有内容之外,但我无法使其与z-index一起使用。
任何提示?
非常感谢, w ^
答案 0 :(得分: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;
}
&#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;