我已经看过其他的问题和答案,但它似乎根本没有帮助我 - 这种悬停效果在Safari上完美无缺,有四个方向,左,右,上,下第一个层在所述方向上滑动。但是在Chrome上,没有滑动动作,而且有闪烁。有任何想法吗?
codepen.io/anon/pen/VYQQbK
答案 0 :(得分:0)
你需要改变
.left:hover {
left: -100%;
}
到
.left:hover {
margin-left: -100%;
}
这是一个固定的例子:
html, body, .container, .box {
margin: 0;
padding: 0;
}
h1,
h3,
h4,
h5,
body {
color: #fff;
text-align: center;
font-family: 'oswald';
}
h2,p {
width: 75%;
margin: 0 auto;
font-size: 16px;
}
p {
padding: 15px;
}
img {
width: 120px;
height: auto;
border-radius: 50%;
border: 3px solid white;
}
.container {
width: 100%;
height: 100vh;
min-height: 100%;
}
.box {
width: 33.3%;
float: left;
height: 100%;
position: relative;
}
.front-layer, .back-layer {
height: 100%;
}
.front-layer {
z-index: 1;
background-color: purple;
position: absolute;
}
.back-layer {
z-index: -1;
background-color: #2BAEFF;
position: realtive;
}
.front-layer > div, .back-layer > div {
top: 10%;
position: relative;
}
.up, .down, .left, .right {
-webkit-transition: 1.2s;
-webkit-transform: 1.2s;
transition: 1.2s;
transform: 1.2s;
width: 100%;
-webkit-transform-style: preserve-3d; /* Safari, Chrome & Opera support */
transform-style: preserve-3d; /* IE support */
}
.up:hover, .down:hover, .left:hover, .right:hover {
-webkit-transition: all 1.2s;
-webkit-transform: 1.2s;
transition: all 1.2s;
transform: 1.2s;
opacity: 0;
}
.left:hover {
margin-left: -100%;
}

<div class="container">
<div class="box"><!-- info box start -->
<div class="front-layer left">
<div>
<img class="click" src="../Boxes/imgs/person.png">
<h2>John Snow</h2>
<p>Meet John, our resident content editor working on our advertising content and managing the marketing.</p>
</div>
</div>
<div class="back-layer">
<div>
<img src="../Boxes/imgs/goofy.png">
<p>Hey, my name is John, and here's some gibberish. Cupcake ipsum dolor sit amet candy canes muffin gingerbread I love. Dragée pudding jelly-o candy canes cake tart pastry sesame snaps. I love liquorice I love apple pie.</p>
</div>
</div>
</div> <!-- info box end -->
</div>
&#13;
<强>更新强>
有诀窍:
.up:hover {
margin-top: -100%;
}
.down:hover {
margin-top: 200%;
}
.left:hover {
margin-left: -100%;
}
.right:hover {
margin-left: 200%;
}