CSS動畫：改變文本框的高度，以便「填充」具有新顏色的相同文本框

我試圖在CSS中設置動畫頭，以便帶有標題的白色文本框逐漸由相同的紅色文本框垂直重疊。CSS動畫：改變文本框的高度，以便「填充」具有新顏色的相同文本框

我一直在試圖通過將兩個文本框放在海誓山盟之上，然後在頂部將動畫框的高度設置爲動畫。在本視頻中顯示：http://atlantis.cit.ie/interaction/assignment1/animationpage.m4v

這裏是培訓相關的HTML代碼：

<header> 
    <h1 id="whitetext">Animated Header</h1> 
    <h1 id="redtext">Animated Header</h1> 
</header>

而CSS：

h1 
{ 
    text-align: center; 
    font-size: 300%; 
    float: left; 
    width: 75%; 
    padding: 0; 
    margin: 0; 
} 

#whitetext 
{ 
    color: white; 
    z-index: -1; 
    position: absolute; 
} 

#redtext 
{ 
    color: red; 
    z-index: 1; 
    position: absolute; 
    -webkit-animation: headerAnimation 5s infinite; 

} 

@-webkit-keyframes headerAnimation{ 
    0% {line-height: 0%;} 
    50% {line-height: 100%;} 
    100% {line-height: 0%;} 
}

我試圖改變高度，最大高度，規模，線條高度以及將動畫應用於紅色文本框周圍的單獨容器，但無濟於事。

任何幫助將非常感激。

來源

2015-04-12 Eric Bickerdyke

我看了你的代碼，你試圖找到你的解決方案可以實現它與使用具有白色和紅色部分圖像的背景剪輯。看看我寫的這個快速的東西（我實際上使用了一個白色的紅色標誌）。

所以實際發生的是我們爲背景圖像y位置設置了動畫。背景在文本中被剪輯的地方。

請注意，這可能只從IE9工作和..（http://caniuse.com/#feat=background-img-opts）

當然，你可以通過添加一個漸變背景提升，而不是背景圖片的腳本。

body { 
 
    background: black; 
 
} 
 
h1 { 
 
    font-family: Arial; 
 
    font-size: 5em; 
 
    text-align: center; 
 
    background-image: url(http://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Flag_red_white_5x3.svg/512px-Flag_red_white_5x3.svg.png); 
 
    -webkit-background-clip: text; 
 
    background-clip: text; 
 
    color: rgba(0, 0, 0, 0); 
 
    -webkit-animation: headerAnimation 5s infinite; 
 
} 
 
@-webkit-keyframes headerAnimation { 
 
    0% { 
 
    background-position: 0 -50%; 
 
    } 
 
    50% { 
 
    background-position: 0 0; 
 
    } 
 
    100% { 
 
    background-position: 0 -50%; 
 
    } 
 
}

<h1>Animation</h1>

來源

2015-04-12 20:00:41 Kay

背景在IE9 +工作，但背景剪輯：文本僅在WebKit的 – vals

真正的工作，但有是不支持所有瀏覽器中的填充工具。 https://github.com/TimPietrusky/background-clip-text-polyfill – Kay

是的，但我認爲你應該在答案中提出警告。順便說一句好的答案。 – vals

CSS動畫：改變文本框的高度，以便「填充」具有新顏色的相同文本框

回答

相關問題