Drawing a border when the page loads?

问题

I have seen the type of thing I need for, in this link.

I want the first one to be drawn when the page loads, is there any ways I can do it?

I tried messing with the code, but got no results, the border would still appear when I hover the div instead of drawing it on page load.

  &::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
  }
}

回答1:

You need to apply the :hover transitions to just the :after and :before pseudo's.

You also need to ensure you update the button to point to the appropriate html tag.

Lastly I used jquery to wait for the document to load before applying the .draw class.

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

There were a few other items such as setting the initial height and weight for the pseudo classes to 0 and then changing it to 100% in the .draw rule.

Codepen showing implementation

来源：https://stackoverflow.com/questions/45377326/drawing-a-border-when-the-page-loads