为了一个新的网页设计,我正在尝试使用CSS过渡和z-index控制两个50%宽度的层,但似乎存在冲突:z-index似乎太慢了。正如您在fiddle中看到的,当悬停时,白色框隐藏在右边滑块div后面,直到过渡完成。有没有更快的替代方法?还是有其他方法可以实现?非常感谢您的帮助!
这是我的CSS:
这是我的CSS:
body {
background:black;
}
div {
-webkit-transition:opacity 0.6s ease, width 0.6s ease;
transition:opacity 0.6s ease, width 0.6s ease;
}
.slide {
position:absolute;
top:0;
bottom:0;
width:50%;
-webkit-transform:skew(-15deg);
-moz-transform:skew(-15deg);
-ms-transform:skew(-15deg);
-o-transform:skew(-15deg);
transform:skew(-15deg);
z-index:2;
}
.slide:hover {
width:60%;
z-index:3;
}
.slide#left {
left:0;
}
.slide#right {
right:0;
}
.wrap {
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.inner {
width:100%;
height:100%;
-webkit-transform:skew(15deg) scale(1.5);
transform:skew(15deg) scale(1.5);
opacity:0.5;
position:absolute;
}
.inner:hover {
opacity:1;
}
.inner#left {
background:url(//savado.nl/new/key.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.inner#right {
background:url(//savado.nl/new/code2.jpg) no-repeat center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-ms-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.slide .logo {
position:absolute;
z-index:99;
top:50%;
height:20%;
padding-left:20%;
background:white;
}
.logo#left {
right:0;
-webkit-transform:translateX(50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(50%) translateY(-50%) skew(15deg);
-o-transform:translateX(50%) translateY(-50%) skew(15deg);
transform:translateX(50%) translateY(-50%) skew(15deg);
}
.logo#right {
left:0;
-webkit-transform:translateX(-50%) translateY(-50%) skew(15deg);
-moz-transform:translateX(-50%) translateY(-50%) skew(15deg);
-ms-transform:translateX(-50%) translateY(-50%) skew(15deg);
-o-transform:translateX(-50%) translateY(-50%) skew(15deg);
transform:translateX(-50%) translateY(-50%) skew(15deg);
}
这里是fiddle代码示例链接!
PS:我是第一次在这个论坛上发布自己的问题,如果违反了任何规则,请谅解。此外,我的英语不是很好,因为它不是我的母语(我是荷兰人)。但是请帮助我!