页面加载时画一个边框？

我已经看到了我需要的东西的类型，在这个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 
    } 
}

来源

2017-07-28 I_like_trains

请也分享你的HTML代码，以便我们更好地理解你的问题。 –

你有没有想过像这个例子http://jsfiddle.net/ueu64hps/1/ –

@UdhayTitus不是真的，我想画线不填满边框。 –

您需要的:hover转换适用于只是:after和:before假的。

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

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

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

有几个其他项目，如设置伪类0最初的身高和体重，然后在.draw规则将其更改为100%。

Codepen showing implementation

来源

2017-07-28 16:36:51

它伎俩，谢谢！ –

页面加载时画一个边框？

回答

相关问题