Question

我希望CSS能够在悬停时为大小background-size: cover;到background-size: 120%的背景设置动画。我不能让背景以100％开始，因为它开始在不同的设备/监视器上垂直重复。但是，在这种情况下，transition:.5s;会停止任何类型的动画。对此有何解决方法？

代码如下所示：

HTML

<div class="desktop-signs">
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-illustration">
      <h2>ILLUSTRATION &amp; ANIMATION</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-website">
      <h2>WEBSITE DEVELOPMENT</h2>
    </div>
  </div>
  <div class="image-box">
    <div class="col-md-4 block-service" id="block-game">
      <h2>GAME &amp; APP DEVELOPMENT</h2>
    </div>
  </div>
</div>

CSS

.__hero-container #services .block-service {
  height: 800px;
  background-image: url('../images/blockillustration.jpg');
  background-size: cover;
  text-align: center;
  color: #fff;
  background-position: center;
  opacity: 1;

  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  transition:.5s;
}

.__hero-container #services .block-service:hover {
  background-size: 110%;
  opacity: 0.8;
  cursor: pointer;
}

Answer 1

您已经意识到您无法从string x = "Word 1 2"; stringstream ss(x); string z; int a; int b; ss >> z >> a >> b;动画到任何其他值。

您可以使用缩放的伪元素伪造效果：

＆＃13;

cover

＆＃13;

.block-service {
  height: 800px;
  color: #fff;
  opacity: 1;
  position: relative;
  overflow: hidden;
}

.block-service:before {
  content: "";
  background-image: url('http://placehold.it/400x400');
  background-size: cover;
  background-position: center;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: all .5s ease;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: -1;
}

.block-service:hover:before {
  transform: scale(1.2);
  opacity: 0.8;
  cursor: pointer;
}

＆＃13;

动画背景大小：缩放到背景大小：110％

1 个答案: