【问题标题】：fill animation using CSS or Javascript使用 CSS 或 Javascript 填充动画
【发布时间】：2013-07-19 12:22:11
【问题描述】：

我只是想知道是否可以使用 CSS 或 javascript 创建填充动画？

基本上我想创建一个如下图所示的填充动画：

http://i40.tinypic.com/eit6ia.png

红色为填充，黑色为空。

这是 Jeff 为图像发布的我的代码，但由于某种原因它不起作用！我错过了什么吗？？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#black{
    position:absolute;
    z-index:2;
    color:black;
    font-weight:bold;
    font-size:2em;
    width:768px;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
}
</style>

<script language="javascript">
var red = document.getElementById('red');

red.style.width = "0px";
red.style.height = "1024px";
var animation = setInterval(function(){

    if(parseInt(red.style.width,10) == 768)
        clearInterval(animation);
    red.style.width = parseInt(red.style.width,10)+2 +"px";
},10);
</script>


</head>

<body>
<div><img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg"/><img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg"/></div>
</body>
</html>

【问题讨论】：

一定要带文字吗？可能知道方法
@ChrisLaarman，不，我实际上需要它与图像。

标签： javascript css

【解决方案1】：

这是纯 JavaScript 中的一种方式。我对 CSS 样式很感兴趣。

Live Demo(with text)

Live Demo (with images)

图像动画

HTML

<div>
    <img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg" />
    <img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg" />
</div>

CSS

#black {
    /* Added the position and the z-index to ensure images overlay correctly */
    position:absolute;
    z-index:2;

    /* styling fun */
    color:black;
    font-weight:bold;
    font-size:2em;

    /* default width */
    width:768px;
}
#red {
    /* Position and z-index let us overlay the #black and #red elements*/
    position:absolute;
    z-index:10;

    /* This is to put the element directly over the #black element 
       (compensating the margin/padding of the #black element */
    left:8px;

    /* We make the initial width 0px and hide the overflow. */
    width:0px;
    overflow:hidden;

    /* Fun styling */
    font-weight:bold;
    font-size:2em;
    color:red;
}

JavaScript

var red = document.getElementById('red');

red.style.width = "0px";
/* set the height so the image does not "scale" */
red.style.height = "1024px";
var animation = setInterval(function () {

    if (parseInt(red.style.width, 10) == 768) clearInterval(animation);
    red.style.width = parseInt(red.style.width, 10) + 2 + "px";
}, 10);

文字动画

HTML

<div> 
    <span id="black">LOGO</span>
    <span id="red">LOGO</span>
</div>

CSS

#black{
    /* Fun styling */
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    /* Position and z-index lets us overlay the #black and #red elements*/
    position:absolute;
    z-index:10;

    /* This is to put the element directly over the #black element 
       (compensating the margin/padding of the #black element */
    left:8px;

    /* We make the initial width 0px and hide the overflow. */
    width:0px;
    overflow:hidden;

    /* Fun styling */
    font-weight:bold;
    font-size:2em;
    color:red;
}

JavaScript

/* On window load (when the page is loaded) */
window.onload = function(){
    /* We select our #red element */
    var red = document.getElementById('red');

    /* Set the width of #red to 0px */
    red.style.width = "0px";

    /* Create an action that will execute every 50ms */
    var animation = setInterval(function(){

        /* If the element is at the desired width, we clear the animation loop */
        if(red.style.width == "91px")
            clearInterval(animation);

        /* Otherwise, we set the width+=1, ensuring to get the numeric value of it only */
        red.style.width = parseInt(red.style.width,10)+1 +"px";
    },50);
};

jQuery 替代

$('#red').css('width','0px');
$('#red').animate({'width':'91px'},4500);

JavaScript 与 jQuery

>

JSPerf results

经过非官方测试后，用于此目的的 jQuery 动画的运行速度将比其纯 JavaScript 对应物慢 85%。这是一个巨大的性能差异。

【讨论】：

漂亮干净光滑+1
谢谢杰夫。我已尝试将您的 javascript 解决方案应用于两张图片（一张红色徽标和一张黑色徽标）。这两个图像都放置在两个单独的 div 中，称为 preloader 和 preloader2。 preloader2 将徽标保持为红色。但不幸的是它不起作用，它只显示黑色徽标（预加载器 div）！您的解决方案是否仅适用于和字体/文本？
@JessyJordan 这里是how it's done with images。只需在 JavaScript 中指定元素的默认 height，以便图像水平显示而不是缩放。您还需要使用position:absolute 设置第一个图像，如有必要，只需将z-index 设置为较低（就像我在CSS 部分中所做的那样）。编辑我将使用图像的方式添加到我的答案中。

【解决方案2】：

我用相同的文本将 2 个 div 放在彼此上，并在点击时为其中 1 个设置动画。

HTML

<div class="red">Text</div>
<div class="black">Text</div>

CSS

div {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 48px;
    font-family: arial;
    font-weight: bold;
    width: 150px;
    overflow: hidden;
    cursor: pointer;
}
div.red { color: red;}

Javascript

$(document).ready(function() {
    $("div.black").animate({
        'width': 0
    }, 2000);
});

http://jsfiddle.net/d8LAn/3/

【讨论】：

可以不点击就完成吗？即页面加载后？另外，持续时间可以慢一点吗？

【解决方案3】：

这样做的一种方法是定位 2 个图像，一个是黑色的，一个是红色的（在顶部），将红色的一个的宽度设置为 0，并像这样使用 jquery：

$('#redone').animate({
width: 'widthofyourelement'
}, 600)

这会给它“填充”的效果，如果你想以不同的方式填充它，我建议查看rhaphael.js 并阅读SVG，

仅限 CSS solution

【讨论】：

哦该死的错字，让我来修正一下
这实际上是我正在寻找的，但有什么方法可以在没有 jquery 的情况下做到这一点？像 javascript 之类的东西？
@JessyJordan Jeff 得到了纯 js，如果你也有兴趣，这里有一个 css 解决方案jsfiddle.net/YQA69

【解决方案4】：

你可以用普通的 javascript 做到这一点：

function animate() {
    var logo = document.getElementById('logo');
    logo.style.color = 'blue';
    logo.style.backgroundColor = '#ff8';
    // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
    var elem = logo;
    var offset = { top: 0, left: 0 };
    do {
        if (!isNaN(elem.offsetLeft)) {
            offset.top += elem.offsetTop;
            offset.left += elem.offsetLeft;
        }
    } while (null !== (elem = elem.offsetParent));
    var c = logo.cloneNode(true);
    c.id = '';
    c.style.position = 'absolute';
    c.style.top = offset.top + 'px';
    c.style.left = offset.left + 'px';
    c.style.color = 'red';
    c.style.backgroundColor = '#8ff';
    c.style.width = 0;
    c.style.height = logo.clientHeight + 'px';
    document.body.appendChild(c);
    //logo.parentNode.insertBefore(c, logo.nextSibling); //(alternative)
    var maxw = logo.clientWidth,
        currw = 0;
    var duration = 1000; //miliseconds
    var iv = setInterval(function () {
        currw += 1;
        if (currw > maxw) {
            clearInterval(iv);
        }
        c.style.width = currw + 'px';
    }, (duration/maxw));
}

http://jsfiddle.net/SkfHx/（完整代码）
http://jsfiddle.net/SkfHx/show（结果，在 IE7+ 和所有其他浏览器中运行良好）

【讨论】：

【解决方案5】：

仅使用 CSS：在 HTML 中：-

<h1>Online<a><span>Online</span></a></h1>

在 CSS 中：-

h1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    line-height:100px;
    width: 280px;
    text-align: center;
    font-size:70px;
    color:#fff;
   background:rgba(171,169,170,0.8);
    padding:0px; 
    margin:0px;
    cursor:pointer;

}
     h1 a {
        position: absolute;
        top: 0;
        left: 0;
        height: 0px;
        width: 0px;
        text-align: center;
        font-size: 70px;
        color:#fff;
        overflow:hidden;
        padding: 0px;
        margin: 0px;
 -webkit-transition:     all 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }
   h1:hover a{
    height: 100px;
    width: 280px;
 -webkit-transition:     all 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);

    }
     h1 a span { position: absolute;
        top: 0;
        left: 0;
         font-size: 70px; height: 100px;
    width: 280px;
    color:rgba(0, 148, 255, 0.84);
    cursor:pointer;
    }

【讨论】：