0

我正在尝试为我的网页创建简单的进度条。我已经按如下方式设置了我的代码：

<div class="progress">
  <p class="info">Some nice info</p>
  <div class="update-progress">
    <div class="update-progress-bar animate" style="width: 40%"></div>
</div>

我的CSS是这样的：

.progress {
    position: relative;
    margin: 20px -20px -20px;
    padding: 15px;
    background: #fafafa;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-radius: 0 0 6px 6px;
    background-image: -webkit-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: -moz-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: -o-linear-gradient(top, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    background-image: linear-gradient(to bottom, #fafafa, #eaeaea 45%, #e1e1e1 65%, #f2f2f2);
    box-shadow: inset 0 1px white;
    line-height: 21px;
    color: #999;
    text-shadow: 0 1px white;
}
.progress .info {
    line-height: 16px;
    font-size: 11px;
    text-align: center;
}
.progress .update-progress {
    clear: left;
    margin-top: 5px;
    /*margin: 12px 10px 4px;*/
    height: 8px;
    padding: 3px;
    background: #ebebeb;
    border-radius: 7px;
    box-shadow: inset 0 2px 3px #000000, 0 1px white;
    box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.2), 0 1px white;
}
.progress .update-progress-bar {
    height: 100%;
    background: #73c822;
    border: 1px solid;
    border-color: #6eb626 #62a21f #5a9122;
    border-radius: 4px;
    box-sizing: border-box;
    background-image: -webkit-linear-gradient(top, #73c822, #67aa24);
    background-image: -moz-linear-gradient(top, #73c822, #67aa24);
    background-image: -o-linear-gradient(top, #73c822, #67aa24);
    background-image: linear-gradient(to bottom, #73c822, #67aa24);
    box-shadow: inset 0 1px rgb(255, 255, 255);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.15);
    /*ANIMACJA*/
    -moz-transition: width .5s ease-in-out;
    -o-transition: width .5s ease-in-out;
    -webkit-transition: width .5s ease-in-out;
    transition: width .5s ease-in-out;
}
.progress .animate {
    content:"";
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, rgba(255, 255, 255, .2)), color-stop(.25, transparent), color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.75, rgba(255, 255, 255, .2)), color-stop(.75, transparent), to(transparent));
    background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent);
    z-index: 1;
    background-size: 50px 50px;
    -moz-animation: move 2s linear infinite;
    -o-animation: move 2s linear infinite;
    -webkit-animation: move 2s linear infinite;
    animation: move 2s linear infinite;
    overflow: hidden;
}
@-webkit-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
@-moz-keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}
@keyframes move {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 50px 50px;
    }
}

有了这个，我的进度条看起来像这样： 在此处输入图像描述
我的代码在这里可用：http: //jsfiddle.net/Misiu/BhRtQ/

我现在要做的就是让它与IE9兼容。

对于渐变，我打算使用CSS3PIE，但我不知道如何制作进度动画。

我怎样才能使它在 IE9 上看起来不错？
我的第一个想法是在 IE9 中使用动画 gif 作为背景，但也许这可以完全没有外部图像？

CSS3Pie背景可以动画吗？

编辑：
这是我的临时版本：http: //jsfiddle.net/Misiu/BhRtQ/9/
我正在使用 jQuery animate 为背景位置设置动画。

4

1 回答 1

1

老实说，我不认为 CSS3Pie 会给你带来很好的体验。

它当然可以动态控制——CSS3Pie 主页通过允许您切换效果来证明这一点。

问题是动画比简单地打开和关闭效果要复杂得多。动画需要浏览器快速连续渲染每一帧。

我从未尝试过使用 CSS3Pie 制作动画。我猜这是可能的，但它肯定不能与 CSS 动画结合使用，而且我也愿意打赌它绝对会影响您的浏览器性能。

CSS3Pie 非常适合用于现场效果，但众所周知，当它在页面上大量使用时会出现性能问题。如果浏览器不得不为动画每秒多次重新处理 CSS3Pie 效果，那肯定属于我对“很多”的定义。

我认为您最好为旧浏览器提供纯色后备。渐变效果很好，但它真的不值得为此牺牲那么多浏览器性能（特别是考虑到重点是显示进度条，所以你显然需要你可以获得的所有浏览器性能）。

如果你只需要支持 IE9，那么在没有 CSS3Pie 的情况下，通过使用 SVG 图像作为你的背景，也可以实现这样的背景效果。这可以作为数据 URL 包含在您的 CSS 代码中，并且在纯 CSS 中作为 IE9 的后备解决方案非常有效。有关可以为您提供适当代码的生成器工具，请参见此处。

这个解决方案的好处是它是纯 CSS 的，因此它可以完美地与您现有的动画配合使用；即它基本上只是一个背景图像，所以你的动画通过移动图像就可以了。是的，它是一个图像，但它不是 CSS 外部的，所以希望它符合您的标准。（当然，您也可以使用 PNG 图像作为数据 URL 来执行此操作，但 SVG 可能会更好）

当然，这不适用于 IE8，但您确实在问题中指定了 IE9。如果您需要 IE8 支持或者您不喜欢 data-URL 解决方案，那么我的建议就是坚持使用纯背景色作为后备。

于 2013-11-25T12:07:48.483 回答