Question

这是我的HTML：

  <div class="wrapper">
    <figure align="center"><img src="http://www.felipegrin.com/port/or-site.jpg" alt=""><br><span>WEBSITE RESPONSIVO EM HTML5 PARA <br> A EMPRESA OR LEDS</span></figure>
    <figure align="center"><img src="http://www.felipegrin.com/port/or-cat.jpg" alt=""><br><span>CATÁLOGO DE PRODUTOS FEITO PARA A <br> EMPRESA OR LEDS</span></figure>
    <figure align="center"><img src="http://www.felipegrin.com/port/cci.jpg" alt=""><br><span>WEBSITE PARA O CENTRO CULTURAL <br> ISRAELITA (CCI)</span></figure><br>
    <figure align="center"><img src="http://www.felipegrin.com/port/cartazes.jpg" alt=""><br><span>CARTAZES PUBLICITÁRIOS PARA O CENTRO <br> CULTURAL RAV KOOK</span></figure>
    <figure align="center"><img src="http://www.felipegrin.com/port/padronagem.jpg" alt=""><br><span>PADRONAGENS FEITAS PARA A DISCIPLINA <br> "DESENVOLVIMENTO DE PADRONAGENS"</span></figure>
    <figure><img src="http://www.felipegrin.com/port/animacao.jpg" alt=""><br><span>ANIMAÇÃO FEITA PARA A DISCIPLINA <br> "ANIMAÇÃO PARA COMPUTAÇÃO"</span></figure>
  </div>

这就是CSS：

body {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.wrapper figure {
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.wrapper figure::before {
  position: absolute;
  top: 0;
  left: -100%;
  content: '';
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.3)));
  background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 100%);
  z-index: 2;
  width: 50%;
  height: 100%;
  -webkit-transform: skewX(-25deg);
     -moz-transform: skewX(-25deg);
      -ms-transform: skewX(-25deg);
       -o-transform: skewX(-25deg);
          transform: skewX(-25deg);
}

.wrapper figure:hover::before {
  -webkit-animation: shine .77s;
     -moz-animation: shine .77s;
       -o-animation: shine .77s;
          animation: shine .77s;
}

.wrapper figure img {
  z-index: 1;
}

.wrapper figure span {
  font-family: 'Montserrat', sans-serif;
  color: #3dadc7;
  text-transform: uppercase;
  font-size: 15px;
}

@-webkit-keyframes shine {
  100% {
    left: 100%;
  }
}

@-moz-keyframes shine {
  100% {
    left: 100%;
  }
}

@-o-keyframes shine {
  100% {
    left: 100%;
  }
}

@keyframes shine {
  100% {
    left: 100%;
  }
}

正如您所看到的here，悬停时的动画似乎在您第一次悬停在每张图片时起作用，但是当您重试悬停时，有时它只是不起作用！这真的很奇怪，我不明白为什么有时会工作而其他人不会！

Answer 1

动画用于figure标记。您用作说明的span位于figure标记内。因此，当您将鼠标悬停在图像上，但将鼠标放在描述上时，您不会在悬停事件中触发另一个。刚才不动的动画。尝试使用img标记来保存图片本身，并将动画放在img标记中，而不是figure。

悬停时的CSS动画有时会起作用

1 个答案: