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

2019-11-20 10:40:30

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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组件

下一篇：Bootstrap树形控件使用方法详解