图片上的进度条或 Div

Question

我想模拟加载效果，所以图片的不透明度是逐渐变化的。

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>

在我的示例中，Div 在图像上方。我需要图像不透明度变得更清晰，所以与我所拥有的相反图片应显示为 0 到 100%

有道理吗？

感谢您的帮助

Answer 1

更改对象的嵌套层次结构，命名为 progress 和 pbaranim div，如此

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

您将从那里开始，通过添加另一个带有起始颜色的图像，并将当前图像保留为起始颜色（动画的起始颜色和终止颜色）等...

Answer 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

图片上的进度条或 Div

Progress Bar or Div over image

html

css

loading