标签：web height border ase set abs back -o and
html
<div class="banner">
<div class="dot dot0"></div>
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
<div class="dot dot6"></div>
<div class="dot dot7"></div>
<div class="dot dot8"></div>
<div class="dot dot9"></div>
</div>
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);
})
标签：web height border ase set abs back -o and
原文地址：https://www.cnblogs.com/congfeicong/p/10029108.html
