css - div的凸边，CSS中div效果的侧面切入

Question

我想在 CSS 中创建两个形状。第一个，左边的那个，我快要做出来了，但是我的形状跑得太远了。

第二个形状，我完全在挣扎。

有没有办法复制这些形状？有没有办法不使用 Psuedo 元素/仅作为一个 div 来做到这一点？

目标是使用 CSS 动画将第一个形状变成第二个形状，所以我不认为 SVG 是一个选项。

div 应该从第一个形状开始，逐渐过渡到第二个形状。到目前为止，我在使用我的方法让凸起不突出时遇到了问题。

HTML

<div id="one"></div>
<div id="two"></div>

CSS

div {
    width: 80px;
    height: 80px;
    background: black;
    margin: 60px;
    position: relative;
}

#one:before {
  content: "";
  display: block;
  position: absolute;
  border-radius: 55%;
  width: 80px;
  height: 80px;
  background: black;
  left: 0;
  top: -34px;
}

JS Fiddle Link

Answer 1

您可以使用 Raphael 或 SVG 来变形贝塞尔路径，但我不知道该怎么做。这应该给出最干净的解决方案

我认为这可能有效:-

• 创建一个元素并隐藏Overflow

• 在伪元素上设置时间，动画边框半径和高度

• 使用伪元素的框阴影进行着色。

> Fiddle <

body{
    background: url("http://www.placekitten.com/g/600/400");
    background-size: cover;
}

#rect {
    height: 300px;
    width: 100px;
    border-top-left-radius: 50px 40px;
    border-top-right-radius: 50px 40px;
    position: relative;
    overflow: hidden;
    -webkit-animation: morph 1s linear 1;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph 1s linear 1;
    animation-fill-mode: forwards; 
}

#rect:before {
    position: absolute;
    content: "";
    width: 100px;
    box-shadow: 0px 0px 0px 400px #A34;
    -webkit-animation: morph2 1s linear 1;
    -webkit-animation-delay: 1s;
    -webkit-animation-fill-mode: forwards;
    
    animation: morph2 1s linear 1;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    
}

@-webkit-keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@-webkit-keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

/*FOR OTHER BROWSERS*/

@keyframes morph {
    0%{
        border-top-left-radius: 50px 40px;
        border-top-right-radius: 50px 40px;
        top:0px;
        height: 300px;
    }
    100%{
        border-top-left-radius: 40px 0px;
        border-top-right-radius: 40px 0px;
        top: 40px;
        height: 260px;
    }
}

@keyframes morph2 {
    0%{
        height: 0px;
        border-bottom-left-radius: 40px 0px;
        border-bottom-right-radius: 40px 0px;
    }
    100%{
        border-bottom-left-radius: 50px 40px;
        border-bottom-right-radius: 50px 40px;
        height: 40px;
    }
}

<div id="rect">
</div>

注意 抱歉，代码有点太大了，大约一年后我正在编写 CSS 和 HTML!我认为可以缩短很多这种困惑情况。