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

问题是你正在使用的那些边界，它推动内容，这就是为什么你看不到你的动画，不是那个被打破，你只能看到边界。

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

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

您可以通过不同的方式实现此行为，但尝试使用转换或border-radius，甚至box-shadow，任何不会推动内部的元素含量

In this presentation你可以找到几个你可以使用border-radius实现的形状，并将它们与变换相结合，就像我旋转包装并与内部元素相反

<强>更新

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

将动画插入形状div

2 个答案: