14

有没有办法减缓悬停效果？我的网站上有一个悬停效果（已删除），它在图像悬停时显示文本。我想把效果放慢一点。画面切换的速度有点令人震惊。

我该怎么做？

4

4 回答 4

41

您可以添加 css3 过渡：

-webkit-transition: all 500ms ease;
-moz-transition: all 500ms ease;
-ms-transition: all 500ms ease;
-o-transition: all 500ms ease;
transition: all 500ms ease;
于 2012-06-22T21:54:41.753 回答
6

这取决于您如何显示文本。如果您要更改 CSS 属性，您可以使用CSS3 transitions来做到这一点。下面是一个例子。

HTML：

<div id="A"></div><div id="B"></div>

CSS：

div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;

    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}

演示

编辑：大卫托马斯告诉我，你不能用过渡来改变显示。我已更新上述内容以使用不透明度。

于 2012-06-22T21:55:03.443 回答
3

我知道这有点晚了，但看看 CSS3 动画。我在我的一个 Garry's Mod 加载屏幕上使用了动画。

/* Styles go here */

button {
  margin-left: 50%;
  margin-right: 50%;
}
button:hover {
  -webkit-animation: breathing 5s ease-out infinite normal;
  animation: breathing 5s ease-out infinite normal;
}
@-webkit-keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}
@keyframes breathing {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  25% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  50% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
  75% {
    -webkit-transform: scale(1.5);
    -ms-transform: scale(1.5);
    transform: scale(1.5);
  }
  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <p>Below I have a button that changes size on mouse hover useing CSS3</p>
  <button>Hover over me!</button>
</body>

</html>

我知道这不是您要寻找的结果，但我相信您和其他人会发现这很有用。

于 2015-06-26T16:53:56.223 回答
2

如果你愿意，你可以使用 jQuery .fadeIn() http://api.jquery.com/fadeIn/

.fadeIn( [duration] [, callback] )
持续时间字符串或数字确定动画将运行多长时间。
动画完成后调用的回调函数。

于 2012-06-22T22:36:18.160 回答