Question

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

<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;
    }
}

有了这个我有进度条，看起来像这样： enter image description here
我的代码可在此处找到：http://jsfiddle.net/Misiu/BhRtQ/

我现在要做的是使其与IE9兼容。

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

如何在IE9上看起来很好看？我的第一个想法是在IE9中使用动画gif作为背景，但也许这可以完全没有外部图像？

CSS3Pie背景可以动画吗？

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

Answer 1

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

它当然可以动态控制 - CSS3Pie主页通过允许您切换效果来提供证据。

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

我从未试图使用CSS3Pie进行动画制作。我猜这有可能，但它肯定不会与CSS动画结合使用，而且我也愿意打赌这对你的浏览器性能来说是绝对的。

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

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

如果你只需要支持IE9，那么可以通过使用和SVG图像作为背景来实现这样的背景效果而不使用CSS3Pie。这可以作为数据URL包含在您的CSS代码中，并且在纯CSS中作为IE9的后备解决方案非常有效。 See here表示可以为您提供相应代码的生成器工具。

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

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

CSS3动画进度条IE9 polyfill CSS3Pie

1 个答案: