页面加载时绘制边框?

Question

我已经在这个链接中看到了我需要的东西类型。

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

我尝试弄乱代码，但没有得到任何结果，当我悬停在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 标记。

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

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

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

显示实现的代码笔