将动画插入形状的 div答案

【问题标题】：Insert animation into shaped div将动画插入形状的 div
【发布时间】：2015-04-13 14:24:18
【问题描述】：

我必须承认我在 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/

有什么想法吗？

【问题讨论】：

您是否意识到您想要的动画代码仅适用于基于 webkit 的浏览器？当我在 Firefox 中查看它时，我一度对你想要实现的目标感到困惑，直到我看到使用 webkit 前缀的代码。

标签： javascript jquery css animation

【解决方案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%;
    }
}

【讨论】：

【解决方案2】：

问题是你使用的那些边框，它推动了内容，这就是为什么你看不到你的动画，不是坏了而是你只能看到边框。

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

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

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

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

更新：

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

【讨论】：