CSS3標誌/文本波浪運動中

所以我的工作需要我做的動畫旗幟純粹用HTML5和CSS3的前瞻性的東西like this，並且with this kind of movement項目。CSS3標誌/文本波浪運動中

我知道存在一些使用HTML canvas的解決方案，但我的客戶特別要求使用CSS3（並儘可能少使用JavaScript）完成此操作。對於揮舞的效果，我發現的唯一解決方案是創建若干div元素，並在translateY上各有一個動畫延遲，以便一起創建標誌效果（JSFiddle here），併爲文本執行完全相同的操作。

我還可以通過使文本具有絕對位置來使文本與標誌重疊，但是我的問題是我不確定如何用標誌來協調文本的波動，所以它可以完全是相同。或者，或者，如果還有另一種方法來做這個動畫（不知道我要如何在邊緣處處理三角形）？我知道an image can be used to animate over it;在這種情況下什麼會更有效？

來源

2017-04-19 Ana Ameer

這可以通過使用CSS3關鍵幀動畫和切換背景半徑 –

@ X-RaySpecs來完成您的意思是否border-半徑？這不會影響國旗嗎？怎麼樣的文字？ –

正在使用SVG的選項？還是它真的必須是HTML + CSS？ –

我們可以使用關鍵幀在CSS3中執行動畫。

您必須具有透明圖像，該透明圖像將具有一組幀（單個圖像中的所有幀）並使用關鍵幀進行動畫處理。

下面是一個例子這樣的 - https://codepen.io/Guilh/pen/yldGp

HTML 
<div class="monster"></div> 


CSS 
body { 
    background: #24aecd; 
} 

.monster { 
    width: 190px; 
    height: 240px; 
    margin: 2% auto; 
    background: url('https://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/blog/monster.png') left center; 
    animation: play .8s steps(10) infinite; 
} 

@keyframes play { 
    100% { background-position: -1900px; } 
}

我希望這將有助於你

來源

2017-08-02 09:41:53 Ravichandra

嘗試把答案的重要部分放在Stackoverflow上，而不是放在URL後面的另一個站點上。 – Quentin

好的。謝謝您的幫助 – Ravichandra

CSS3標誌/文本波浪運動中

回答

相關問題