js+css绘制颜色动态变化的圈中圈效果

本文实例讲述了js+css绘制颜色动态变化的圈中圈效果。分享给大家供大家参考,具体如下:

运行效果截图如下:

具体代码如下:

<html>

<head>

<title>circle</title>

<style type="text/css" >

.circle

{

border-radius:50%;

background:#DDDDDD;

}

.circle_inside

{

width:80%;

height:80%;

left:10%;

border-radius:50%;

background:#494949;

position:relative;

top:10%;

}

#circle

{

margin-left:50%;

position:relative;

left:-250px;

width:500px;

height:500px;

}

</style>

<script type="text/javascript" >

var c = 'DDDDDD,DFEFFF,494949,C8DB74,46DFDE,59DDDE'.split(',');

function create_color() {

var color = '',

c_length = c.length,

random_nmb = Math.floor(Math.random()*c_length);

return '#'+c[random_nmb];

}

function create_inside_circle(color, id) {

return "<div id='"+id+"' class='circle_inside' style='background:"+color+";'></div>";

}

function create_all_circle() {

var circle_nmb = 15,

html = [],

id = 0,

inside_circle = document.getElementById('circle');

for(var i=0; i<circle_nmb; i++) {

id = "circle"+i;

inside_circle.innerHTML = create_inside_circle(create_color(), id);

inside_circle = document.getElementById(id);

}

}

window.onload = function(){

setInterval(function(){

create_all_circle();

}, 1500);

}

</script>

</head>

<body>

<div class="circle bg1" id="circle">

</div>

</body>

</html>

更多关于js特效相关内容感兴趣的读者可查看本站专题:《jQuery动画与特效用法总结》、《jQuery常见经典特效汇总》及《JavaScript动画特效与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。

以上是 js+css绘制颜色动态变化的圈中圈效果 的全部内容, 来源链接: utcz.com/z/330152.html

回到顶部