gpt4 book ai didi

javascript - 如何防止CSS缩放动画的水平滚动

转载 作者:行者123 更新时间:2023-12-03 12:39:55 25 4
gpt4 key购买 nike

我想使用风景图像,放大到中心的地标并停留在那里。我当前的代码有一个主要问题..

这是缩放时出现的水平条。

我希望图像的宽度为 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;
}

关于javascript - 如何防止CSS缩放动画的水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23571071/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com