使用CSS或Javascript填充动画
[英]fill animation using CSS or Javascript
问题描述
I was just wondering if it is possible to create a fill animation using CSS or javascript? 
我只是想知道是否可以使用CSS或javascript创建填充动画？
basically I want to create a fill animation like the one shown in the image bellow: 基本上我想创建一个填充动画，如下图所示：
http://i40.tinypic.com/eit6ia.png http://i40.tinypic.com/eit6ia.png
the red being the fill and the black is being empty. 红色是填充物，黑色是空的。
This is my code that Jeff posted for images but it doesn't work for some reason! 这是我为图片发布的代码，但由于某些原因它无法正常工作！ am i missing something?? 我错过了什么？
<!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>
5 个解决方案
解决方案1
3 2013-07-19 12:27:40
One way to do so would be to position 2 images one that is black and one that is red(on top) set the width of the red one to 0 and using jquery like so : 一种方法是将2个图像放在一个黑色，一个放在红色（在顶部），将红色的宽度设置为0并使用jquery，如下所示：
$('#redone').animate({
width: 'widthofyourelement'
}, 600)
This would give it the effect of "filling", if you wish to fill it differently i suggest checking out rhaphael.js and reading up on SVG , 如果你想以不同的方式填写它，这会给它带来“填充”的效果我建议检查rhaphael.js并阅读SVG ，
解决方案2
3 2013-07-19 12:32:39
I put 2 divs over eachother with the same text, and animate 1 of them on click. 我使用相同的文本将2个div放在彼此上，并在点击时为其中的1个设置动画。
HTML HTML
<div class="red">Text</div>
<div class="black">Text</div>
CSS 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 使用Javascript
$(document).ready(function() {
$("div.black").animate({
'width': 0
}, 2000);
});
解决方案3
3 已采纳 2013-07-19 12:48:28
Here is a way in Pure JavaScript. 这是纯JavaScript中的一种方式。 I had fun with CSS styling. 我喜欢CSS样式。
Live Demo(with text) 现场演示（带文字）
Live Demo (with images) 现场演示（带图像）
Image animation 图像动画
HTML 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 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 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);
Text animation 文字动画
HTML HTML
<div>
<span id="black">LOGO</span>
<span id="red">LOGO</span>
</div>
CSS 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 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 alternative jQuery替代品
$('#red').css('width','0px');
$('#red').animate({'width':'91px'},4500);
JavaScript vs jQuery JavaScript与jQuery
After an unofficial test battery, the jQuery animation for this purpose would be ran 85% slower than its pure JavaScript counterpart. 在非官方的测试电池之后，用于此目的的jQuery动画将比纯JavaScript对手运行85％ 。 This is a huge performance difference. 这是一个巨大的性能差异。
解决方案4
0 2013-07-19 13:44:32
You can do it this way with plain javascript: 你可以用普通的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/ (full code) http://jsfiddle.net/SkfHx/ （完整代码）
http://jsfiddle.net/SkfHx/show (result, works well in IE7+ and all other browsers) http://jsfiddle.net/SkfHx/show （结果，适用于IE7 +和所有其他浏览器）
解决方案5
0 2013-10-31 20:51:29
Only With CSS : IN HTML :- 仅限CSS：HTML： -
<h1>Online<a><span>Online</span></a></h1>
And IN CSS : - 在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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.