從黑白顯示圖像，就好像它正在加載（從左到右）

我有一個效果，它顯示一個灰色的文字和CSS中的關鍵幀，這些字符在動畫CSS屬性中變成黑色。

我想知道我該如何實現這種效果，但是使用圖像從左到右從顏色過渡到圖像。

這是代碼：

<div class="modal"> 
     <h1 id="testid" data-content="THIS&nbsp;IS&nbsp;A&nbsp;TEST">THIS&nbsp;IS&nbsp;A&nbsp;TEST</h1> 
    </div>

而CSS：

@-webkit-keyframes loading{ 
    from{max-width:0} 
} 

@-moz-keyframes loading{ 
    from{max-width:0} 
} 

@-o-keyframes loading{ 
    from{max-width:0} 
} 

@keyframes loading{ 
    from{max-width:0} 
} 

.modal { 
background:#fff; 
position:fixed; 
top:0; 
bottom:0; 
left:0; 
right:0; 
z-index:9999999; 
} 

.modal h1 { 
position:absolute; 
left:50%; 
top:50%; 
margin-top:-15px; 
margin-left:-125px; 
font-size:30px; 
text-align:center; 
color:rgba(0,0,0,.2); 
} 

.modal h1:before { 
content:attr(data-content); 
position:absolute; 
overflow:hidden; 
color:#000; 
max-width:100%; 
-webkit-animation:loading 5s; 
-moz-animation:loading 5s; 
-o-animation:loading 5s; 
-ms-animation:loading 5s; 
animation:loading 5s; 
}

代碼在這裏運行：http://jsfiddle.net/5Vmnn/

謝謝

來源

2014-06-07 codiaf

css動畫核心只爲動畫幻燈片一個值，就像下一個顏色一樣。它可以一次做多對，但它不能混合兩種不同的東西，如尺寸和顏色，在動畫製作時互相排斥。你可能會透露黑白的彩色副本，但你可能需要腳本，而不僅僅是CSS。 – dandavis

你能不能有2個div，每個div包含一個圖像，一個b + w和一個顏色，並且顏色DIV的寬度緩慢擴展，類似於上面的？只要確保圖像具有全寬設置，但父div的寬度會將其剪下即可。 – TommyBs

如果您有2個版本的圖像（一個是b＆w，另一個是彩色的），則可以實現此效果，否則（沒有b＆w版本），你可能不得不爲基於webkit的瀏覽器使用'filter'，爲別人使用'svg'。 –

也許你在想這樣的事情？ Fiddle

這是不是灰度，但它提供了類似的效果。

編輯：使用Here「SA版本與灰度的Webkit -webkit-filter（仍然是對到左...）

我已經改變了你的疊加使用不透明，但原理是一樣的：

.modal { 
opacity: 0.8; 
background:black; 
z-index:9999999; 
position: absolute; 
left: 0; 
top: 0; 
max-width:0; 
-webkit-animation:loading 5s; 
-moz-animation:loading 5s; 
-o-animation:loading 5s; 
-ms-animation:loading 5s; 
animation:loading 5s; 
    width: 100%; 
    height: 100%; 
}

來源

2014-06-07 19:16:57 kmoe

'從左到右'，但很好地完成。 –

不錯，我認爲你的例子我有一些工作。謝謝 – codiaf

我會做GIF動畫，其我認爲要容易得多。

做5-10圖像中的每個變化量B & w和顏色，然後使用ImageMagick的製作GIF動畫出他們有一行是這樣的：

convert -delay 20 -loop 0 *.jpg animated.gif

您可能希望loop=1了單循環，而我在示例中將它設置爲零來實現無限循環。

enter image description here View animated GIF here

如果你不熟悉的Photoshop，我添加了一個色相飽和層和手搖飽和度下降到零製作黑白圖像。然後，我爲梯度工具按G，並在整個圖像上畫出一條水平線，以指定從B & W到顏色的轉換位置，同時按住Shift鍵確保其處於水平狀態。然後將其保存爲1.jpg，並在另一個地方重新繪製漸變，並將其另存爲2.jpg等。

來源

2014-06-07 19:07:25

不錯的GIF。我喜歡你在你的網站上主持過這項活動，專門從事黑白攝影。 ;） – kmoe

從黑白顯示圖像，就好像它正在加載（從左到右）

回答

相關問題