Question

这是我的代码。我希望能够放大和缩小，并在图像上向左上滚动

<div style="width:50%;float:left;height:650px;">
            <img  width="70%" style="float:right; position: absolute; top:5px; right:5px;" src="http://example.com/mypic/test.jpg">
        </div>

这是我的CSS

img {
transition: -webkit-transform 0.25s ease;
transition: transform 0.25s ease;
}

img:active {
-webkit-transform: scale(2);
transform: scale(2);
}

Answer 1

你必须在css中使用@keyframes。

Answer 2

需要使用@keyframes来动画那个。请参阅该代码。希望你解决这个问题。：）

    /* Safari 4.0 - 8.0 */
@-webkit-keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
} 

/* Standard syntax */ 
@keyframes mymove {
    from {top: 0px;}
    to {top: 200px;}
}

Answer 3

使用CSS对图像进行平移和缩放属性最好应用于:hover状态。

我删除了内联样式并重新分离了CSS和HTML。图片周围是原始的div，其中包含.zoom-img类，可以根据您网站上的其他div元素设置样式。

.zoom-img {
  width: 500px;
  height: 500px;
  overflow: scroll;
}

.zoom-img img {
  width: 100%;
  transition: width 0.25s ease;
}

.zoom-img img:hover {
  width: 3000px;
}

<div class="zoom-img">
  <img src="http://placekitten.com/3000/3000">
</div>

如何使用CSS和HTML缩放和滚动图像

3 个答案: