從梯形到右梯形的動畫變換充滿梯度

我需要從梯形到梯形充滿梯度的動畫。這是我所做的：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轉換？謝謝大家的幫助。

來源

2013-03-04 Artem Svirskyi

我不認爲這是可能的，因爲你需要的邊界使得梯形具有正確的背景。同時你不希望右邊框具有相同的背景。 – dave 2013-03-04 12:13:56

並用css轉換？ – 2013-03-04 12:16:34

如果您需要支持舊瀏覽器，那麼使用畫布自己繪製形狀或使用raphael.js如何？ – 2013-03-04 12:39:37

這是我的解決方案，使用包裝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

來源

2013-03-04 22:13:17 vals

哦，對）謝謝你） – 2013-03-04 22:28:03

從梯形到右梯形的動畫變換充滿梯度

回答

相關問題