仿海棠学院 动态效果(点)
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ background:#000; animation:act 0.5s linear; -webkit-animation:act 0.5s linear; } .center{ width:200px; padding:20px; margin:20px auto; } .box{ width:100%; height:100px; display: flex; flex-direction: column; justify-content: space-between; } .box div{ position:relative; width:5px; height:5px;; background:#fff; border-radius:50%; } .box div:first-child{ width:15px; height:15px; left:0; } .box div:nth-child(2){ left:20%; } .box div:nth-child(3){ left:40%; } .box div:nth-child(4){ left:60%; } .box div:nth-child(5){ left:80%; } .box:nth-child(2n){ transform: scaleX(-1); -webkit-transform: scaleX(-1); } @keyframes act{ 0%{ margin-left:-30px; margin-top:-20px; } 10%{ margin-left:-20px; margin-top:-10px; } 30%{ margin-left:0; margin-top:0; } 60%{ margin-left:-30px; margin-top:-20px; } 80%{ margin-left:-20px; margin-top:-10px; } 100%{ margin-left:0; margin-top:0; } } .box div.active{ box-shadow: 0 0 10px #6aeff8; background: #6aeff8; transform: scale(2.5); -webkit-transform: scale(2.5); } @keyframes point{ 0%{ transform:scale(0) } 50%{ transform:scale(1.4); } 100%{ transform:scale(1); background:#19decd; } } </style> </head> <body> <div class="center"> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="box"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> </div> </body> <script src="js/jquery-1.11.3.min.js"></script> <script> $(function(){ var $div=$(".center .box div"); $div.each(function(i,item){ var $this=$(this); setTimeout(function(){ $this.addClass("active").siblings().removeClass("active"); if(i % 5 == 0){ $this.parents(".box").siblings().children().removeClass("active"); } if(i == ($div.length - 1)){ setTimeout(function(){ $div.removeClass("active"); },120); } },140*i+1000) }); }) </script> </html>