<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title> </title> <style> html,body{height: 100%;} .cotainer{ height: 100%; overflow:hidden; position: relative; } .hb{ position: absolute; width:60px; height:60px; background: url('img/hb.jpg') no-repeat; background-size: 100% 100%; animation: run 3s ease-in infinite; opacity: 0; } .co{ position: absolute; left: 0; height: 200px; width: 200px; border-radius: 10px; background: url('img/cxk.gif') no-repeat center; background-size: 100%; text-align: center; color:red; font-weight: bold; align-items: flex-end; font-size: 20px; top: -200px; display: none; } .hb:hover{ animation-play-state: paused; opacity: 1; z-index: 9999; } .hb:hover .co{display: flex;} @keyframes run{ 0%{opacity: 0;} 10%{opacity: 1;} 100%{opacity: 1; transform: translate3d(10px,120vh,-10px) } } </style> </head> <body> <div class="cotainer"> <div class="hb"></div> </div> </body> <script src="../jquery.js"></script> <script> var cotainer=$(".cotainer"); var leftnum=0; for(var i=0;i<30;i++){ var _div=$("<div class='hb'></div>") var co=$("<div class='co'></div>") let left=Math.floor(Math.random()*7); let delayTime=Math.floor(Math.random()*40+2); co.html(`获得 ${left}次 跟鲲鲲单挑的机会！`) co.appendTo(_div) leftnum+=left; _div.css({ 'top':`${left}%`, 'left':`${leftnum}%`, 'animation-delay':`${delayTime/10}s` }) cotainer.append(_div) } </script> </html>
以前有个人给我点了个赞，后来那个人中了500万！
