javascript - 将动画插入到形状的 div 中

Question

我必须承认我在 CSS 方面算不上天才...为了练习，我正在创建一个模拟啤酒杯的动画。

目前，通过一些示例，我已经实现了所需的动画: http://jsfiddle.net/yfb1fo8c/1/

还有我想要的形状:

#liquid {
    background: black;
    border-bottom: 500px solid #e39700;
    border-left: 80px solid transparent;
    border-right: 80px solid transparent;
    width: 300px;
    color: #fff8eb;
    position: absolute;
    clip:auto;
    overflow:hidden;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
}

但是当我尝试合并这两个想法时，我的形状完全崩溃了，或者没有动画:http://jsfiddle.net/ogpqj2kr/2/

有什么想法吗？

Answer 1

这是你想要的吗:http://jsfiddle.net/Paf_Sebastien/cqa7rfu7/ ？

(抱歉，我没有提供更多细节，因为我必须更改很多东西。基本上，您的“杯子”没有高度，所以您看不到波浪。无论如何我做了更多更改。)

这是你的新 CSS :

body {
    padding: 0;
    margin: 0 10px;
    background: black;
}

#foam {
    margin-top: 20px;
    background: white;
    width: 460px;
    height: 100px;
    z-index:1;
}

#liquid {
    background: #000;
    width: 460px; height: 500px;
    position: relative;
    clip:auto;
    overflow:hidden;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    z-index:2;
    background-image: 
    -webkit-gradient(
      linear,
      left bottom,
      left top,
      color-stop(0, rgb(0,50,150)),
      color-stop(0.50, rgb(0,150,255))
    );
}

#liquid:before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 500px 80px 0 0;
    border-color: #000000 transparent transparent transparent;
    z-index: 10;
}
#liquid:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 80px 500px 0;
    border-color: transparent #000000 transparent transparent;
    z-index: 10;
}

.wave{
    bottom:0;
    background:#fff;
    display:inline-block;
    height:10%;
    width:10px;
    position:absolute;
    -webkit-animation-name:             dostuff; 
    -webkit-animation-duration:         3s; 
    -webkit-animation-iteration-count:  infinite;
    -webkit-transition-timing-function: ease-in-out;
    z-index:3;
}


@-webkit-keyframes dostuff{
    0%, 100% {
        height:10%;
    }
    50% { 
        height:20%;
    }
}