Question

后面的效果如下：按钮看起来不像一个按钮（即边框：无），点击后我希望焦点轮廓在n秒后淡出。我怎样才能实现这一目标？感谢

Answer 1

只需添加转换。重要的是要记住，你需要转换轮廓颜色，而不是轮廓。

.no-button {
  margin:15px;
  border:none;
}

.no-button:focus {
  outline-color:transparent;
  -webkit-transition: outline-color .7s ease-out 1s;
     -moz-transition: outline-color .7s ease-out 1s;
       -o-transition: outline-color .7s ease-out 1s;
	      transition: outline-color .7s ease-out 1s;
}

<button class="no-button">This is no button</button>

第一次（.7s）是duration，第二次（1s）是delay。

Answer 2

为了获得这样的效果，边框比轮廓更好，我为你玩了一点点，结果如下：

button {
  background: border-box linear-gradient(#841518, #4C0C00) no-repeat;
  font-size: x-large;
  font-family: Sans;
  border: none;
  transition: border-color 0.7s 0.2s;
  border-width: 15px;
  box-sizing: border-box;
  height: 80px;
  width: 220px;
  display: inline-block;
}

button:focus {
  border-style: solid;
  border-color: transparent;
  outline: none;
}

<button type="button">Click here</button>

几秒后，按钮背景轮廓消失

2 个答案: