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

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

运行效果截图如下：

具体代码如下：

html标题圈/标题样式类型=' text/CSS ' .圆圈{边框-半径：50%;背景# DDDDDD}。circle _ inside { width :80%；高度：80%;左侧：10%;边界半径：50%;背景： # 494949;位置：相对；top:10} #圆圈{左边距-:50%;位置：相对；左侧：-250像素；宽度宽度：500像素高度：500 px}/样式脚本类型=' text/JavaScript ' var c=' dddddddd，DFEFFF，494949，C8DB74，46DFDE，59DDDE ' .split('，')；函数create_color() { var color=' '，c_length=c.length，random _ nmb=math。地板(数学。random()* c _ length)；返回“#”c[random _ nmb]；}函数create_inside_circle(color，id){ return ' div id=' id ' ' class=' circle _ inside ' style=' background : ' color '；/div '；}函数create _ all _ circle(){ var circle _ nmb=15，html=[]，id=0，inside _ circle=document。getelementbyid(' circle ')；for(var I=0；icircle _ nmbI){ id=' circle ' I；内圆。inner html=create _ inside _ circle(create _ color()，id)；inner _ circle=文档。getelementbyid(id)；} }窗口。onload=function(){ setInterval(function(){ create _ all _ circle()；}, 1500);}/脚本/头体div class=' circle bg1 ' id=' circle '/div/body/html更多关于射流研究…特效相关内容感兴趣的读者可查看本站专题： 《jQuery动画与特效用法总结》 、 《jQuery常见经典特效汇总》 及《JavaScript动画特效与技巧汇总》

希望本文所述对大家Java脚本语言程序设计有所帮助。