如何使用凹面動畫與CSS

所以，我有側邊欄，只是顯示它的一些內容，當它徘徊時，它會顯示所有的側邊欄寬度。如何使用凹面動畫與CSS

.sidenav { 
 
    height: 100%; 
 
    width: 100px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    padding-top: 20px; 
 
    transition: 0.8s; 
 
    opacity: 0.8; 
 
    box-shadow: 0px 20px 50px black; 
 
    border-radius: 0; 
 
    background: black; 
 
} 
 

 
.sidenav:hover { 
 
    width: 215px; 
 
    overflow: hidden; 
 
    animation-name: roundborder; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes roundborder { 
 
    0% { border-radius: 0; } 
 
    50% { border-radius: 0 50% 50% 0; } 
 
    100% { border-radius: 0; } 
 
}

<div class="sidenav"></div>

我的問題是如何使凹動畫如果側邊欄不叮無縫的？所以在它懸停後，指針不再在側邊欄中，它會回到初始狀態，但凹面動畫，我不能使用負百分比，所以我用它來做什麼？感謝

來源

2017-02-25 Rian

相關：[？是凹圓角半徑可能（http://stackoverflow.com/questions/16388078/is-a-concave-border-radius-possible ） –

但我的問題是在動畫中，就像我的例子。我將在'.sidenav'上使用@MatheusAvellar – Rian

我會推薦一些[tessi]（http://stackoverflow.com/a/16388799/4824627）所說的話，使用':: before'和' ::之後'以模擬凹形邊框。你可以適應它在動畫中使用 –

我猜你有你創建一個普通的正方形，那麼雙

動畫首當其與圓角的出做SVG然後第二個是

凹角處。

來源

2017-02-25 02:41:29 Nadim

我很抱歉遲到的回覆，但爲什麼我的意思是，當roundborder-in處於活動狀態時，凹形不是凸起 – Rian

好吧，我認爲這不可能像這你必須創建一個** SVG **並對它進行動畫處理，我認爲這是唯一的方法 – Nadim

也許我誤解了這個問題，但是你能不能把相同的動畫放在div上（沒有：懸停）。就像這樣：

.sidenav { 
 
    height: 100%; 
 
    width: 100px; 
 
    position: fixed; 
 
    z-index: 2; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: #fff; 
 
    overflow: hidden; 
 
    padding-top: 20px; 
 
    transition: 0.8s; 
 
    opacity: 0.8; 
 
    box-shadow: 0px 20px 50px black; 
 
    border-radius: 0; 
 
    background: black; 
 
    animation-name: roundborder2; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
.sidenav:hover { 
 
    width: 215px; 
 
    overflow: hidden; 
 
    animation-name: roundborder; 
 
    animation-duration: 1s; 
 
    animation-iteration-count: 1; 
 
} 
 

 
@keyframes roundborder { 
 
    0% { border-radius: 0; } 
 
    50% { border-radius: 0 50% 50% 0; } 
 
    100% { border-radius: 0; } 
 
} 
 
@keyframes roundborder2 { 
 
    0% { border-radius: 0; } 
 
    50% { border-radius: 0 50% 50% 0; } 
 
    100% { border-radius: 0; } 
 
}

<div class="sidenav"></div>

來源

2017-02-27 15:55:51 Brad

如何使用凹面動畫與CSS

回答

相關問題