html

css

 

.banner{width:100%;height:665px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box;padding-top:86px;background-color:#ff3d00;position:relative;color:#fff;overflow:hidden}.banner .dot{background:url(http://dn-acac.angelcrunch.com/v1/root/dot.png) center center no-repeat;background-size:100%;border-radius:50%;position:absolute;z-index:1;transition:all 8s ease-in-out;-webkit-transition:all 8s ease-in-out;-moz-transition:all 8s ease-in-out;-o-transition:all 8s ease-in-out}.dot0{width:400px;height:400px;opacity:.5;left:10px;top:250px}.dot1{width:300px;height:300px;opacity:.5;left:200px;top:200px}.dot2,.dot3{width:200px;height:200px}.dot2{opacity:.2;left:100px;top:100px}.dot3{opacity:.3;left:500px;top:200px}.dot4{opacity:.2;left:800px;top:300px}.dot4,.dot5{width:150px;height:150px}.dot5{opacity:.4;left:1100px;top:400px}.dot6{width:120px;height:120px;opacity:.2;left:1200px;top:450px}.dot7{width:100px;height:100px;opacity:.3;right:100px;top:500px}.dot8{width:150px;height:150px;opacity:.2;right:200px;top:100px}.dot9{width:100px;height:100px;opacity:.2;right:300px;top:500px}

 

js

 

$(function() {  function r(a, b) {    return a > b ? 0 : Math.round(Math.random() * (b - a) + a);   }  function dots() {    max_y = $(".banner").height();    max_x = $(".banner").width();    $('.dot').each(function() {      $(this).css({                 'top': r(-100, 765),                 'left': r(200, 1440),                 'opacity': r(2, 6) / 10,                 });     });    }   dots();   t = setInterval(dots, 8000); })