1

我需要从正方形到右梯形填充渐变的动画。这是我所做的：http: //jsfiddle.net/7Aav7/。

#box {
    border-bottom: 100px solid transparent;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    height: 0;
    width: 50px;
    background-origin: border-box;
    background-image: -webkit-linear-gradient(blue, yellow);
    border-right: 0px solid white;
    -webkit-animation: rightTrapezoid 2s infinite alternate;
}
@-webkit-keyframes rightTrapezoid {
    to {
        border-right-width: 50px;
    }
}

但在这种情况下，我的右边框是白色的 - 我需要它是透明的（不要与身体颜色绑定）。有什么办法可以做到这一点？这可能与css转换吗？谢谢大家的帮助。

4

1 回答 1

1

这是我的解决方案，使用包装器 div。

（无聊的）html：

<div id="container">
<div id="inner">
</div>
</div>

在内部 div 中，标准的东西。只注意负左

#inner {
    width: 400px;
    height: 150px;
    left: -50px;
    position: absolute;
    background-image: -webkit-linear-gradient(blue, yellow);
    -webkit-animation: rightTrapezoid 2s infinite alternate;
}

和动画，只是使用倾斜

@-webkit-keyframes rightTrapezoid {
    to {
        -webkit-transform: skew(30deg,0deg); 
    }
}

这会在 div 的两侧生成动画。为了隐藏左侧移动，我使用了容器 div，隐藏了溢出（使用内部 div 的负左侧）

#container {
    left: 55px;
    top: 0px;
    width: 400px;
    height: 150px;
    position: absolute;
    overflow: hidden;
}

这是小提琴

于 2013-03-04T22:13:17.650 回答