如何使用凹面动画与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

回答

相关问题