Question

我有这段代码：https://jsfiddle.net/e0u4sow1/6/

它有效，当您将鼠标悬停在图像上时，我在文本下方添加了一个箭头。我希望箭头从左侧滑入中心并缓慢滑动，当您将鼠标移开以慢速向右滑动时。我现在花了2个小时尝试很多东西才能让它发挥作用，但我放弃了。有人可以帮我弄这个吗？关于代码中哪些部分使箭头滑入和滑出，也可能是一个小小的解释？我删除了所有带箭头效果关系的代码，所以它只是添加了箭头的原始效果

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.media__image {
  display: block;
}
.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body:hover {
  opacity: 1;
}
.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.media__body h2 {
  margin-top: 0;
}
.media__body p {
  margin-bottom: 1.5em;
}
.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #FFF inset;
  transform: rotate(135deg);
}

<h1>MR Cube</h1>
<div class="media">
  <a href="http://www.google.nl/">
    <img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
    <div class="media__body">
      <h1>Lees meer</h1>
      <div class="arr"></div>
    </div>
  </a>

Answer 1

由于你没有发布你制作动画的尝试，很难解释你做错了什么。

我在以下示例中制作了动画，在箭头上添加了translate并在悬停时将其删除。转换decalration在两个状态之间制作动画。

＆＃13;

.media {
  display: inline-block;
  position: relative;
  vertical-align: top;
}
.media__image {
  display: block;
}
.media__body {
  background: rgba(41, 128, 185, 0.7);
  bottom: 0;
  color: white;
  font-size: 1em;
  left: 0;
  opacity: 0;
  overflow: hidden;
  padding: 3.75em 3em;
  position: absolute;
  text-align: center;
  top: 0;
  right: 0;
  -webkit-transition: 0.6s;
  transition: 0.6s;
}
.media__body:hover {
  opacity: 1;
}
.media__body:after,
.media__body:before {
  border: 1px solid rgba(255, 255, 255, 0.7);
  bottom: 1em;
  content: '';
  left: 1em;
  opacity: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  -webkit-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
  -webkit-transition: 0.6s 0.2s;
  transition: 0.6s 0.2s;
}
.media__body:before {
  border-bottom: none;
  border-top: none;
  left: 2em;
  right: 2em;
}
.media__body:after {
  border-left: none;
  border-right: none;
  bottom: 2em;
  top: 2em;
}
.media__body:hover:after,
.media__body:hover:before {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}
.media__body h2 {
  margin-top: 0;
}
.media__body p {
  margin-bottom: 1.5em;
}
.arr {
  display: inline-block;
  padding: 1.2em;
  box-shadow: 8px 8px 0 2px #FFF inset;
  transform: translateX(250px) rotate(135deg);
  transition: transform .8s ease-in;
}
.media__body:hover .arr {
  transform: translateX(0) rotate(135deg);
  transition-timing-function: ease-out;
}

＆＃13;

<div class="media">
  <a href="http://www.google.nl/">
    <img alt="" class="media__image" src="http://www.webwinkelsucces.nl/wp-content/uploads/2015/05/1112625-les-outils-de-test-et-d-integration-continue-open-source.jpg" />
    <div class="media__body">
      <h1>Lees meer</h1>
      <div class="arr"></div>
    </div>
  </a>

＆＃13;

请注意，您需要将供应商前缀添加到转换和转换属性以支持浏览器支持（请参阅2D transform和transitions的canIuse）

我还建议您阅读MDN关于transforms和transitions的信息。

添加另一个形状，对现有的图像叠加悬停效果有效

1 个答案: