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 に答える