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

2024-12-19 03:27:41

本文实例讲述了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程序设计有所帮助。

APP中javascript+css3实现下拉刷新效果

原生app里的数据列表都会使用下拉刷新的效果,在webapp里可以采用iscroll.swiper等插件或框架实现,那么如何自己编码实现类似的效果呢,下面介绍使用原生js+css3实现的简单效果. html布局 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-
基于javascript实现随机颜色变化效果

本文实例讲解了基于javascript实现随机颜色变化效果,分享给大家供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>随机颜色变化效果</title> <style type="text/css"> #thediv{
js 获取和设置css3 属性值的实现方法

众多周知 CSS3 增加了很多属性,在读写的时候就没有原先那么方便了. 如: <div style="left:100px"></div> 只考虑行间样式的话,只需 div.style.left 就可获取,设置的时候也只需要 div.style.left='100px' 即可.很简单. 但是css3来了如: <div style="-webkit-transform: translate(20px,-20px)"></di
JavaScript取得WEB安全颜色列表的方法

本文实例讲述了JavaScript取得WEB安全颜色列表的方法.分享给大家供大家参考.具体如下: web安全颜色指的是护眼色, 能够让访问者的眼睛舒服的颜色 //JavaScript取得216种WEB安全色值 var n = 0; var hex = new Array('FF', 'CC', '99', '66', '33', '00'); function colorPanel(){ for (var i = 0; i < 6; i++) { for (var j = 0; j < 6;
JavaScript获取图片像素颜色并转换为box-shadow显示

一.原理: 1.使用HTML5的FileReader API读取图片 FileReader文件读物器,用于读取客户端文件到,注意,文件读取完毕后并不会载入缓存 eg: var upfile = document.querySelector('#upfile'); var fileReader = new FileReader(); fileReader.onload = function(evt) { if(FileReader.DONE==fileReader.readyState) { va
js 颜色选择器（兼容firefox）

复制代码代码如下: <!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=&qu
javascript+css3 实现动态按钮菜单特效

一个菜单按钮特效案例,简单的实现了动态效果. 废话不多说了,直接给大家贴代码了,代码写好不好,还请给位大侠多多指教. <div class="bar" id="menubar"> <div class="menu" id="menu0"> </div> <div class="menu" id="menu1"> </div> &
javascript实现rgb颜色转换成16进制格式

自己试过很好用 function zero_fill_hex(num, digits) { var s = num.toString(16); while (s.length < digits) s = "0" + s; return s; } function rgb2hex(rgb) { if (rgb.charAt(0) == '#') return rgb; var ds = rgb.split(/\D+/); var decimal = Number(ds[1]) *
js点击列表文字对应该行显示背景颜色的实现代码

本文实例讲述了js点击列表文字,实现该行文字显示背景颜色的方法.分享给大家供大家参考.具体如下: JS控制li,鼠标点击时class自动加上,给列表文字产生自己喜欢的背景色的网页特效. 运行效果图如下: <style type="text/css"> li{cursor:pointer;} .cur{background:red;} </style> <script type="text/javascript"> windo
JavaScript中使用sencha gridpanel 编辑单元格、改变单元格颜色

表格GridPanel概述 ExtJS中的表格功能非常强大,包括了排序.缓存.拖动.隐藏某一列.自动显示行号.列汇总.单元格编辑等实用功能. 表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid.ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store.表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义).而表格的数据存储器由Ext.data.Store定义,数据存储器根据解析的数据不同

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

相关推荐

随机推荐