進度條或Div圖像

我想模擬加載效果，所以圖像的不透明度正在逐漸改變。進度條或Div圖像

body { 
 
    background-color: #aaa; 
 
    padding: 10px; 
 
} 
 

 
#progressbar { 
 
    width: 269px; 
 
    height: 269px; 
 
    background-color: #eee; 
 
    clear: both; 
 
} 
 

 
#progress { 
 
    background: #fff; /*-- Color of the bar --*/ 
 
    height: 269px; 
 
    width: 0%; 
 
    max-width: 269px; 
 
    float: left; 
 
    -webkit-animation: progress 2s 1 forwards; 
 
    -moz-animation: progress 2s 1 forwards; 
 
    -ms-animation: progress 2s 1 forwards; 
 
    animation: progress 2s 1 forwards; 
 
} 
 

 
#pbaranim { 
 
    height: 269px; 
 
    width: 269px; 
 
    overflow: hidden; 
 
    background: url("http://i57.tinypic.com/acyid2.jpg"); 
 
    -moz-opacity: 0.5; 
 
    -khtml-opacity: 0.5; 
 
    opacity: 0.5; 
 
    -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=55); 
 
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=55); 
 
    filter: alpha(opacity=55); 
 
} 
 

 
@-webkit-keyframes progress { 
 
    from { } 
 

 
    to { width: 100% } 
 
} 
 

 
@-moz-keyframes progress { 
 
    from { } 
 

 
    to { width: 100% } 
 
} 
 

 
@-ms-keyframes progress { 
 
    from { } 
 

 
    to { width: 100% } 
 
} 
 

 
@keyframes progress { 
 
    from { } 
 

 
    to { width: 100% } 
 
}

<div id="progressbar"><div id="progress" ><div id="pbaranim"></div></div></div>

在我的例子，該事業部是在圖像。我需要圖像的不透明度變得更清晰，所以我所擁有的相反圖像應該顯示從0到100％

有意義嗎？

感謝您的幫助

來源

2015-04-07 wp supprt

你的意思是這樣？ http://jsfiddle.net/qgf2e0gw/ –

不是真的對不起，加載效果需要從左到右並在完成後覆蓋圖像。像這樣http://oi59.tinypic.com/seswtx.jpg –

好的，這是你的意思嗎？ http://jsfiddle.net/qgf2e0gw/2/ –

可以實現與下面的代碼的效果：

CSS

#progressBar { 
    position:relative; 
} 
#progressImg { 
    width:391px; 
} 
#opacObj { 
    -webkit-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96); 
    -webkit-animation-fill-mode: forwards; 
    -moz-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96); 
    -moz-animation-fill-mode: forwards; 
    -o-animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96); 
    -o-animation-fill-mode: forwards; 
    animation:opacAnimation 4s 1 cubic-bezier(0, 1.09, .66, .96); 
    animation-fill-mode: forwards; 
    width:391px; 
    height:364px; 
    background:#fff; 
    position:absolute; 
    top:0; 
    left:0; 
} 
@-webkit-keyframes opacAnimation { 
    0% { 
     opacity:0.8; 
     left:0; 
    } 
    100% { 
     opacity:0.0; 
     left:391px; 
    } 
} 
@-moz-keyframes opacAnimation { 
    0% { 
     opacity:0.8; 
     left:0; 
    } 
    100% { 
     opacity:0.0; 
     left:391px; 
    } 
} 
@-o-keyframes opacAnimation { 
    0% { 
     opacity:0.8; 
     left:0; 
    } 
    100% { 
     opacity:0.0; 
     left:391px; 
    } 
} 
@keyframes opacAnimation { 
    0% { 
     opacity:0.8; 
     left:0; 
    } 
    100% { 
     opacity:0.0; 
     left:391px; 
    } 
}

HTML

<div id="progressbar"> 
    <img src="http://i57.tinypic.com/acyid2.jpg" border="0" id="progressImg"> 
    <div id="opacObj"></div> 
</div>

jsFiddle demo

來源

2015-04-07 16:52:57

99.9％there @daniellisik，我用不同的值更新了小提琴，http：//jsfiddle.net/qgf2e0gw/6/。感謝您的幫助 –

很高興能幫到您！乾杯。 –

更改你的對象namedly進步和pbaranim的div的嵌套層次結構，因爲這

<div id="progressbar"><div id="pbaranim"><div id="progress" ></div></div></div>

你會從那裏取得進展，通過與從顏色添加另一個圖像，並保持當前圖像的顏色（從和動畫的顏色）等等

來源

2015-04-07 16:18:54 serdarsenay

上交互式地更改特定值，請參閱我的意思，https://jsfiddle.net/ fmbseg26/1 /，比你可以把它從那裏拿出來，希望它有幫助 – serdarsenay

我試過你的代碼，但同樣，我想要帶點的圖像變得100％真的是藍色。圖像從20％不透明度開始，進度開始並覆蓋隨着div進度慢慢變爲100％不透明的圖像？ –

嘗試在那裏再次顯示相同的圖像;）繼續使用CSS的背景圖像功能，以便瀏覽器加載一次並緩存它，因此在一個要點有另一個像PABaranim的div保持而另一個被覆蓋 – serdarsenay

進度條或Div圖像

回答

相關問題