使用CSS或Javascript填充动画_Javascript_Css

使用CSS或Javascript填充动画

javascript css

使用CSS或Javascript填充动画,javascript,css,Javascript,Css,我只是想知道是否可以使用CSS或javascript创建填充动画基本上，我想创建一个填充动画，如下图所示：红色是填充物，黑色是空的这是我的代码，杰夫张贴的图像，但它不工作的某些原因！我错过了什么吗 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="htt

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

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

红色是填充物，黑色是空的

这是我的代码，杰夫张贴的图像，但它不工作的某些原因！我错过了什么吗

<!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>


无标题文件
#黑色的{
位置：绝对位置；
z指数：2；
颜色：黑色；
字体大小：粗体；
字号：2em；
宽度：768px；
}
#红色的{
位置：绝对位置；
z指数：10；
左：8px；
宽度：0px；
溢出：隐藏；
字体大小：粗体；
字号：2em；
颜色：红色；
}
var red=document.getElementById（'red'）；
red.style.width=“0px”；
red.style.height=“1024px”；
var animation=setInterval（函数（）{
if（parseInt（red.style.width，10）==768）
clearInterval（动画）；
red.style.width=parseInt（red.style.width，10）+2+“px”；
},10);

一种方法是定位两个图像，一个是黑色的，一个是红色的（在顶部），将红色图像的宽度设置为0，并使用jquery如下所示：

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

这会给它带来“填充”的效果，如果你想以不同的方式填充，我建议你在

仅Css

我用相同的文本将两个div放在彼此上方，并在单击时为其中一个设置动画

HTML

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

Javascript

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

这里是纯JavaScript的一种方法。我很喜欢CSS样式

图像动画 HTML JavaScript

文本动画 HTML

JavaScript

jQuery替代方案

JavaScript与jQuery

经过一次非正式的测试后，jQuery动画的运行速度将比纯JavaScript动画慢85%。这是一个巨大的性能差异。

您可以通过普通javascript实现这一点：

function animate（）{
var logo=document.getElementById（'logo'）；
logo.style.color='蓝色'；
logo.style.backgroundColor='#ff8'；
// http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
var elem=徽标；
var offset={top:0，left:0}；
做{
如果（！isNaN（元素偏移左））{
offset.top+=元素offsetTop；
offset.left+=元素offset left；
}
}而（null！=（elem=elem.offsetParent））；
var c=logo.cloneNode（真）；
c、 id=“”；
c、 style.position='绝对'；
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’；
文件.正文.附件（c）；
//logo.parentNode.insertBefore（c，logo.nextSibling）；//（可选）
var maxw=logo.clientWidth，
currw=0；
var duration=1000；//毫秒
var iv=设置间隔（函数（）{
currw+=1；
如果（电流>最大电流）{
间隙（iv）；
}
c、 style.width=currw+'px'；
}，（持续时间/maxw））；
}

（完整代码）

（结果，在IE7+和所有其他浏览器中运行良好）

仅在HTML中使用CSS:

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

它必须是文本吗？可能知道way@ChrisLaarman，不，我实际上需要一个图像。哦，该死的打字错误，让我来修正一下，这就是我要找的，但是没有jquery我有什么办法可以做到这一点吗？类似javascript的东西？@JessyJordan Jeff获得了纯js，如果你也感兴趣，这里有一个css解决方案，可以不点击就完成吗？i、当页面加载时，是否立即删除？还有，持续时间能慢一点吗？非常干净、平滑+1谢谢杰夫。我尝试将javascript解决方案应用于两个图像（一个红色徽标和一个黑色徽标）。这两个图像都放在两个单独的div中，分别称为preload和preforer2。Preforer2将徽标保持为红色。但不幸的是，它不工作，它只显示黑色标志（预加载div）！您的解决方案是否只适用于和字体/文本？@JessyJordan。只需在JavaScript中指定元素的默认

高度

，使图像水平显示，而不是缩放。您还需要将第一幅图像设置为

position:absolute

，必要时只需将其设置为较低的

z-index

（就像我在CSS部分所做的那样）。编辑我在答案中添加了我使用图像的方式。

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

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

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

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

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

/* 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);
};

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

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

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