简单的js特效，背景圆球滚动，类似电脑屏幕锁屏气球

Posted 2021-01-23 夏天的鱼呀

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);
 })