css+js教你实现一个动态颜色变化的圈中圈
2014-02-11 10:03
741 查看
转载:http://www.icodein.com/codein/code_77.html
<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>
相关文章推荐
- 常用CSS效果
- CSS 设计模式一 元素
- 纯CSS实现checkbox
- css3选择器笔记
- HTML/CSS中常遇到的bug 一些注意事项总结
- 一个页面根据功能划分为不同的块的样式显示
- 用CSS指定外部链接的样式代码
- csdn 代码样式 代码高亮 代码风格
- css内容垂直居中
- 纯css3显示隐藏一个div特效的具体实现
- css3让div随鼠标移动而抖动起来
- css3 给页面加个半圆形导航条主要利用旋转和倾斜样式
- css3的@media属性实现页面响应式布局示例代码
- Django 当中使用CSS之类的东西如何设置路径
- css全屏背景
- 一个CSS字体的写法示例说明
- poi Excel 设置样式
- CSS文字大小单位px、em、pt(转)
- Css 书写规范【转】
- css3动画系列之transition 属性