Question

我试图申请＆＃34; shock＆＃34;我的网站上的图像动画。问题是脚本扩展了宽度，所以我可以看到浏览器的底栏：

HTML：

<div class="wrapper">
        <article class="top-logo">
            <h1>
                <a href="#" target="_blank"><img src="img/logo.png" alt="robbie-logo"></a>
            </h1>
        </article>

CSS：

.top-logo {
    position: relative;
    float: right;
}
.top-logo img {
    height: 150px;
    width: 350px; 
    -webkit-transform-style: preserve-3d;
}

.top-logo:hover {
  animation-name: diagonal-slide;
  animation-duration: 0.05s;
  animation-iteration-count: 10;
  animation-fill-mode: forwards;
}

@-webkit-keyframes diagonal-slide {
  from { top: 0; left: 0; animation-timing-function: linear; }
  20% { top: -5px; left: -5px; animation-timing-function: linear; }
  40% { top: 5px; left: -5px; animation-timing-function: linear; }
  60% { top: 5px; left: 5px; animation-timing-function: linear; }
  80% { top: -5px; left: 5px; animation-timing-function: linear; }
  to { top: 0; left: 0; animation-timing-function: linear; }
}

Answer 1

这里没有发生（没有滚动条），但仍然尝试将其添加到容器中：

.wrapper {
  overflow: hidden;
}

＆＃13;

.wrapper {
  overflow: hidden;
}

.top-logo {
  position: relative;
  float: right;
}

.top-logo img {
  height: 150px;
  width: 350px;
  -webkit-transform-style: preserve-3d;
}

.top-logo:hover {
  animation-name: diagonal-slide;
  animation-duration: 0.05s;
  animation-iteration-count: 10;
  animation-fill-mode: forwards;
}

@-webkit-keyframes diagonal-slide {
  from {
    top: 0;
    left: 0;
    animation-timing-function: linear;
  }
  20% {
    top: -5px;
    left: -5px;
    animation-timing-function: linear;
  }
  40% {
    top: 5px;
    left: -5px;
    animation-timing-function: linear;
  }
  60% {
    top: 5px;
    left: 5px;
    animation-timing-function: linear;
  }
  80% {
    top: -5px;
    left: 5px;
    animation-timing-function: linear;
  }
  to {
    top: 0;
    left: 0;
    animation-timing-function: linear;
  }
}

＆＃13;

<div class="wrapper">
  <article class="top-logo">
    <h1>
      <a href="#" target="_blank"><img src="http://placehold.it/100x60/fa0" alt="robbie-logo"></a>
    </h1>
  </article>
</div>

＆＃13;

CSS动画，职位

1 个答案: