Question

我创建了一个网页，有三种不同颜色的div的颜色变化背景。我有以下代码。它的作品，但当背景改变时，我需要简单的动画，当他们改变颜色。我不关心动画，请帮助。

＆＃13;

<script type="text/javascript">
(function(){
	var hexacode = [
'#ff3333',
'#33cc66',
'#3399cc',
],
	el = document.getElementById('autocolor').style,
	counter = -1,
	hexalen = hexacode.length;
	function auto(){
		el.backgroundColor = hexacode[counter = ++counter % hexalen];
	}
	setInterval(auto, 2000);
})();
</script>

＆＃13;

#autocolor{
	width: 1000px;
	height: 700px;
	padding: 0.75em 0.5em 0;
	background:#3399cc;
	border: 1px solid black;
	margin: 3em auto 0;
	font: bold 90% sans-serif;
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="autocolor">

</div>
</body>
</html>

＆＃13;

Answer 1

此代码可能有所帮助。根据需要添加或编辑颜色代码和动画。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
var colours=['#ff3333','#33cc66','#3399cc'];  // List of colors
    var tempID=0;
    var changeInterval=2000;    // Change interval in miliseconds
    var objectID='#bgDiv';      // Object to change colours. 
    
    $(document).ready(function(){        
        setInterval(function(){
                $(objectID).animate({backgroundColor: colours[tempID]},500);
                tempID=tempID+1;
                if (tempID>colours.length-1) tempID=0;
            },changeInterval);
    });
</script>
<style> 
#bgDiv {
    width: 100px;
    height: 100px;
    background: #3399cc;
}
</style>
</head>
<body>
	<div id="bgDiv"></div>
</body>
</html>

Answer 2

彩色动画可能很棘手。如果您可以使用jquery，可以查看此链接（单击＆＃34;查看源＆＃34;） http://jqueryui.com/animate/

该示例动画控件的颜色和宽度。

Answer 3

我正在粘贴仅使用HTML5和CSS3的代码段。

＆＃13;

<!DOCTYPE html>
<html>
<head>
<style> 
div {
    width: 100px;
    height: 100px;
    background: #ff3333;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count: 3;  /* Chrome, Safari, Opera */
    animation: myfirst 5s;
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
    from {background: #ff3333;}
    to {background: #ff5533;}
}

/* Standard syntax */
@keyframes myfirst {
    from {background: #ff3333;}
    to {background: #ff5533;}
}
</style>
</head>
<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

</body>
</html>

＆＃13;

您只需要提供两个接近的十六进制颜色代码。

Answer 4

关键帧也支持百分比。您可以尝试以下代码并根据需要进行调整。

＆＃13;

div {
    width: 100px;
    height: 100px;
    background: #ff3333;
    -webkit-animation: myfirst 5s; /* Chrome, Safari, Opera */
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count: 3;  /* Chrome, Safari, Opera */
    animation: myfirst 10s;
    -webkit-animation-direction: reverse; /* Chrome, Safari, Opera */
    animation-direction: reverse;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes myfirst {
  0% { background:  #3399cc;}
  50% { background:#33cc66; }
  100% { background:#ff3333; }
}

/* Standard syntax */
@keyframes myfirst {
  0% { background:  #3399cc;}
  50% { background:#33cc66; }
  100% { background:#ff3333; }
}

＆＃13;

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>
<div></div>

＆＃13;

当背景颜色改变时需要动画

4 个答案: