Question

我需要从正方形到右边的梯形获得一个充满渐变的动画。以下是我所做的：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变换？谢谢大家的帮助。

Answer 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;
}

here is the fiddle

从正方形到右梯形的动画变换充满了渐变

1 个答案: