Question

我已经看到了我需要的东西，在link中。

我希望在页面加载时绘制第一个，我有什么方法可以做到吗？

我尝试弄乱代码，但没有结果，当我将鼠标悬停在div而不是在页面加载时绘制时，边框仍会出现。

  &::before,
  &::after {
    // Set border to invisible, so we don't see a 4px border on a 0x0 element before the transition starts
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  // This covers the top & right borders (expands right, then down)
  &::before {
    top: 0;
    left: 0;
  }

  // And this the bottom & left borders (expands left, then up)
  &::after {
    bottom: 0;
    right: 0;
  }

  &:hover {
    color: $cyan;
  }

  // Hover styles
  &:hover::before,
  &:hover::after {
    width: 100%;
    height: 100%;
  }

  &:hover::before {
    border-top-color: $cyan; // Make borders visible
    border-right-color: $cyan;
    transition:
      width 0.25s ease-out, // Width expands first
      height 0.25s ease-out 0.25s; // And then height
  }

  &:hover::after {
    border-bottom-color: $cyan; // Make borders visible
    border-left-color: $cyan;
    transition:
      border-color 0s ease-out 0.5s, // Wait for ::before to finish before showing border
      width 0.25s ease-out 0.5s, // And then exanding width
      height 0.25s ease-out 0.75s; // And finally height
  }
}

Answer 1

您需要将:hover转换仅应用于:after和:before伪。

您还需要确保更新button以指向相应的html标记。

最后，在应用.draw类之前，我使用jquery等待文档加载。

$(document).ready(function(){
  $('div').addClass('draw');
})

还有一些其他项目，例如将伪类的初始高度和重量设置为0，然后将其更改为100%规则中的.draw。

Codepen showing implementation

页面加载时绘制边框？

1 个答案: