Question

图像是否可以在无限随机方向的包装中缩放和移动？如何使用css关键帧或动画来实现

链接到小提琴here

我不知道该怎么做。我早就看到了一个jQuery幻灯片插件，它在一个包装器中移动图像。我找不到

<div class="image_wrap">
<img src="/images/img_1.jpg" alt="" />
 </div>

.image_wrap {
   width:580px;
   height:260px;
   overflow:hidden;
}
.image_wrap img {
  width:100%;
  height:100%;
  transform:scale(1.2);
  animation: 1.2s ease 0s normal none infinite running jump;
}

图像应在不应滑动的包装内来回反弹

Answer 1

http://jsfiddle.net/s18tnu70/你的意思是什么？（我在Algaros

的帮助下得到了这个溶剂

    .wrapper {
  background-color: #DDD;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  position: relative;
  border-radius: 5px;
  border: 1px solid #111;
  overflow: hidden;
}
.image {
  display: block;
  width: 100px;
  height: 100px;

background-image: url(http://www.placehold.it/100x100);
  position: absolute;
  -webkit-animation: moveX 3.05s linear 0s infinite alternate, moveY 3.4s linear 0s infinite alternate;
}

@-webkit-keyframes moveX {
  from { left: 0; } to { left: 400px; }
}
@-webkit-keyframes moveY {
  from { top: 0; } to { top: 200px; }
}

Answer 2

这是你想要实现的目标吗？

.image_wrap img {
    width:100%;
    height:100%;
    transform:scale(1.2);
    -webkit-animation: 1.2s slideImg linear infinite;
    animation: 1.2s slideImg linear infinite;
}

@-webkit-keyframes slideImg {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}
@keyframes slideImg {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

小提琴中的例子：http://jsfiddle.net/ke9okv2g/2/

纯CSS图像平移

2 个答案: