本文实例讲述了jquery css3实现会动的小圆圈效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

！DOCTYPE html html lang=' zh-cn ' head meta charset=' utf-8 '/title那些变换颜色的小豆豆/title脚本类型=' text/JAVAScript ' src=' http : jquery。js /脚本样式类型=' text/CSS ' h1 { font-size :16 px；} .圆形{ position:absolute绝对值宽度宽度：100像素高度：100 px边界半径： 50px-web套件-边框-半径：50 px-moz-边界-半径：50 px表示“具有…性质的”型边框-半径：50 px-ms-border-radius :50 px；border:1px实心# ddd背景色： # eee文本对齐：居中；-moz-transit :背景色。5s简易版；-网络套件-transit :背景色。5s简易版；-o-transit :背景色。5s宽松版；-ms-transit :背景色。5s简易版；公交：背景色。5s简易版；}/样式脚本类型=' text/JavaScript ' var coloarray=' abcdefbcdef 1234567890 ' .拆分("");函数createCircle(位置，大小){ var html=[]；var半径=大小。身高尺寸。宽度？size.height/2 :尺寸。宽度/2；var不透明度=数学。random()；不透明度=不透明度0.3?不透明度=0.3 :不透明度；html。push(' div class=' circle ' style=' left : '位置。“左”px；top : ' position . top ' px ')；html。push('宽度： '大小。宽度' px；height : ' size . height ' px ')；html。push(' border-radius : ' radius ' px；');html。push('-web kit-border-radius : ' radius ' px；');html。push('-moz-border-radius : ' radius ' px；');html。push('-o-border-radius : ' radius ' px；');html。push('-ms-border-radius : ' radius ' px；');html。push(' opa city 3360 '不透明度；');html.push('filter:alpha(不透明度=' Math.round(不透明度* 100)')'));html。push('/div ')；返回html。联接(" ")；}函数create color(){ var color=' '；for(var I=0；i6；I){ color=color array[数学。天花板(数学。random()* 21)]；}返回"#"颜色；} function animate(obj){ setInterval(function(){ var position=obj。position()；var left=ParSeint(位置。左)；var top=ParSeint(位置。顶部)；obj.css('背景色'，create color())；obj.animate({'left': left 5}，250)；obj.animate({'left': left - 5，' top': top 5}，250)；obj.animate({'top': top}，250)；obj.animate({'left': left，' top': top}，250)；}, 1000);} $(文档)。ready(function(){ var wrapper=$(' # wrapper ')；var height=parseInt(文档。文档元素。客户端高度| | 500)；var width=ParSeint(包装。width())；for(var I=0；I 200i){ var position={ left : math。圆(数学。random()*(width-50))、top :数学。圆(数学。random()*(高度-100))}；var _ size=50-数学。圆(数学。random()* 40)；var size={ height: _size，width : _ size }；var circle=$(createCircle(位置，大小));circle.appendTo(包装器);圆圈。将鼠标悬停在(function(){ var color=createColor())上；$(这个)。css(“”背景色，颜色);}).鼠标移出(function(){ var color=createColor()；$(这个)。css(“”背景色，颜色);});动画（圆形);} });/script/head body id=' wrapper ' div id=' wrapper '/div/body/html更多关于jQuery特效相关内容感兴趣的读者可查看本站专题： 《jQuery常见经典特效汇总》 及《jQuery动画与特效用法总结》

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