頁面加載時畫一個邊框？

我已經看到了我需要的東西的類型，在這個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

它伎倆，謝謝！ –

頁面加載時畫一個邊框？

回答

相關問題