Question

我有一个CSS转换的链接：

HTML

<a href="#" class="spin circle" id="link">Hover</a>

CSS

.circle::before, .circle::after {
  box-sizing: inherit;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
}

.spin:hover {
  color: #0eb7da;
}
.spin::before, .spin::after {
  top: 0;
  left: 0;
}
.spin::before {
  border: 2px solid transparent;
}
.spin:hover::before {
  border-top-color: #0eb7da;
  border-right-color: #0eb7da;
  border-bottom-color: #0eb7da;
  -webkit-transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
  transition: border-top-color 0.15s linear, border-right-color 0.15s linear 0.1s, border-bottom-color 0.15s linear 0.2s;
}
.spin::after {
  border: 0 solid transparent;
}
.spin:hover::after {
  border-top: 2px solid #0eb7da;
  border-left-width: 2px;
  border-right-width: 2px;
  -webkit-transform: rotate(270deg);
  transform: rotate(270deg);
  -webkit-transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s;
  transition: transform 0.4s linear 0s, border-left-width 0s linear 0.35s, -webkit-transform 0.4s linear 0s;
}

悬停时，我会在链接周围设置动画/绘制边框。它按预期工作。悬停动画完成后，我希望我的链接保留边框。

所以体验就像这样 - ＆gt;我徘徊在不同的链接。它动画并显示活动状态（周围有边框）。

我相信只有拥有一个班级（例如.active）才能做到这一点。我尝试延迟添加边框（最终）（在完成初始动画之后）没有运气。

是否可以在不延迟通过javascript添加课程的情况下执行此操作？

Codepen：https://codepen.io/anon/pen/ybrEjM

在没有javascript的情况下完成CSS转换后显示活动状态

0 个答案: