0

这可能是一个 css3 转换的东西，但我对 css 的了解不够好，无法创建它。我主要想做的是让按钮的大小（原始大小的 125%）增长几毫秒，然后在页面转到下一页之前恢复到原始大小。这对 css/css3/transitions 是否可行，如果可以，如何实现？

谢谢！

4

3 回答 3

1

制作你的按钮<a>并使用:active伪类来做扩展效果。一个不弄乱布局的简单方法是outline属性。

演示： jsFiddle

CSS：

.button {
    background-color: black;
    border: 1px solid black;
    color: white;
    display: inline-block;
    padding: 5px;
}

.button:active {
    outline: 10px solid black;    
}

HTML：

<a class="button">press me</a>
​
于 2012-11-20T23:19:37.373 回答
0

Mozilla Developer Network 有一个很棒的 CSS3 过渡介绍教程。我建议逐步浏览一些示例和源代码，看看这是否可以帮助您弄清楚您正在尝试做什么。

至于动画长度的计时 - 您应该能够轻松地从上面的链接中调整“过渡计时效果采样器”，并尝试不同的计时，直到获得您正在寻找的效果。

于 2012-11-20T23:09:17.270 回答
0

对于如此快速的效果过渡是不需要的，只需更改元素的大小即可。

几毫秒不足以使效果可见。任何小于 20 毫秒的时间。根本不可见，因为屏幕更新速度不够快，无法显示它。大约 100 毫秒。需要它看起来像一个故意的效果，而不仅仅是一个小故障。

例子：

$('input[type=button]').click(function(){
  var e = $(this);
  e.addClass('grown');
  window.setTimeout(function(){
    e.removeClass('grown');
  }, 100);
});

演示：http: //jsfiddle.net/Guffa/GEHCZ/

于 2012-11-20T23:19:40.697 回答