如何防止水平滚动对CSS缩放动画

how to prevent horizontal scroll on css zoom animation

本文关键字：CSS 缩放 动画 滚动 何防止 水平      更新时间：2023-09-26

我想使用一个横向图像，它放大到中心的地标并停留在那里。我对当前代码有一个主要问题…

这是缩放时显示的水平条。

我想让图像的宽度为100%，高度为80%

HTML: 

  <!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>

<link type="text/css" rel="stylesheet" href="css/animate.css">
<link type="text/css" rel="stylesheet" href="css/home1.css">
</head>
<body>
<div id="wrapper">
<a href="#">
    <img src="images/zoom.jpg" alt="">
</a>
</div><!--wrapper-->

</body>
</html>
CSS: 
a {
    overflow:hidden;
    width:100%;
}

a img {
    text-decoration: none;
    display: block;
    width: 100%;
    float: left;
    margin: 0 3px 3px 0;
    opacity: 1;
    -webkit-transform: scale(1,1);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(1,1);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
}
a img:hover {
    opacity: .7;
    -webkit-transform: scale(2.05,2.07);
    -webkit-transition-timing-function: ease-out;
    -webkit-transition-duration: 250ms;
    -moz-transform: scale(2.05,2.07);
    -moz-transition-timing-function: ease-out;
    -moz-transition-duration: 250ms;
    position: relative;
    z-index: 99;

}

我也想知道是否有一种方法可以让它在悬停完成后保持在缩放状态，这样另一个元素可以出现在那个点，但缩放更近。

http://jsfiddle.net/itsnamitashetty/U4HTu/

添加display:block;到a css。它会解决你的问题。演示:http://jsfiddle.net/lotusgodkk/U4HTu/1/

a {
    overflow:hidden;
    width:100%;
    display:block;
}
相关文章：