Question

Can someone say me how i can do something like that on this page:

I want to do like on this website an automatic zoom of my images without hover or click. A ease and out zooming function that is infinite.

I use this class but i don`t know how i activate it.

    .zoom.visible > img {
  -webkit-animation-duration: 30s;
  animation-duration: 30s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: move;
  animation-name: move;
  animation-direction: alternate;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -o-animation-direction: alternate;
  -ms-transform-origin: middle center;
  transform-origin: middle center;
  -webkit-transform-origin: middle center;
  -o-transform-origin: middle center;
  -moz-transform-origin: middle center;
}

Unfortunately i dont`t know what to search for in google and i hope some can help to push me in the right direction or has a code example for me.

Answer 1

将必要的部分复制出网站，这就是您所需要的

CSS：

.zoom.visible > img {
    -webkit-animation-duration: 30s;
    animation-duration: 30s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: move;
    animation-name: move;
    animation-direction: alternate;
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    -o-animation-direction: alternate;
    -ms-transform-origin: middle center;
    transform-origin: middle center;
    -webkit-transform-origin: middle center;
    -o-transform-origin: middle center;
    -moz-transform-origin: middle center;
}
.zoom > img {
    height: auto!important;
    width: 100%!important;
}

@-webkit-keyframes move {
  from {
    transform: scale(1);
    text-indent: -9999px;
    ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
  }
  to {
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -o-transform: scale(1.15);
    -moz-transform: scale(1.15);
  }
}
@keyframes move {
  from {
    transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
    -moz-transform: scale(1);
  }
  to {
    transform: scale(1.15);
    -ms-transform: scale(1.15);
    -webkit-transform: scale(1.15);
    -o-transform: scale(1.15);
    -moz-transform: scale(1.15);
  }
}

适用于具有相同HTML结构的图像：

<div class="zoom visible imagen1" style="opacity: 1; margin-top: 0px; height: 678px;">
    <img src="http://placehold.it/800x600" alt="" />
</div>

演示：http://jsfiddle.net/9hwk7jtu/

Automatic Image zoom with easy and out

1 个答案: