将动画插入成形的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%;
}
}

Answer 2

问题是你正在使用的边界，它推送内容，这就是为什么你看不到你的动画，不是它被破坏了，而是你只能看到边界。

我建议您使用包装器，找到合适的技术来塑造包装器的形状，然后插入到您的液体模板中。

我使用您的代码并更新到这个示例。首先，我使用transform: rotate(45deg);将包装器旋转为45deg，然后以相反的角度旋转元素：transform: rotate(-45deg);以补偿包装器上的变换。

您可以通过不同的方式实现这种行为，但尝试使用transform或border-radius，甚至box-shadow，任何不推动内部内容

在这个演示中，您可以找到使用border-radius可以实现的几种形状，并将它们与转换相结合，就像我旋转包装器和使用内部元素进行相反的操作一样

更新：

修正了工作示例，没有正确导入jQuery