css - 如何使按钮的大小增加 (125%) 几毫秒，然后在单击时将其恢复为原始大小？

Question

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

谢谢!

Answer 1

让你的按钮成为<a>并使用 :active伪类做展开效果。在不弄乱布局的情况下执行此操作的一种简单方法是 outline属性(property)。

演示:

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>
​