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 divs，如此

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

您将从那里开始，通过使用from颜色添加另一个图像，并将当前图像保持为颜色（从动画的颜色到动画的颜色）等...

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图像

2 个答案: