JS寫滑稽笑臉運動效果
效果演示：
（就這玩意兒，差點寫崩了...）
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>滑稽笑臉運動</title> <meta name='author' content='marinerzp'> <style> *{padding: 0;margin: 0;} html,body{ width: 100%; height: 100%; } #main{ width: 100px; height: 100px; border-radius: 50%; background:url(images/1.jpg) 0 0/100px 100px; position: absolute; left: 0; top: 0; z-index: 3; } .show{ width: 50px; height: 50px; border-radius: 50%; background-color: rgb(239, 187, 101); position: absolute; animation: disappear 1.2s ; animation-fill-mode: forwards; } @keyframes disappear{ 0%{opacity: 1;transform:scale(1); } 100%{opacity: 0;transform:scale(0); } } </style></head><body> <div id='main'> </div> <script> let Omain=document.querySelector(’#main’); let MaxLeft=window.innerWidth-Omain.offsetWidth; let MaxTop=window.innerHeight-Omain.offsetHeight; window.οnresize=function(){//監(jiān)聽窗口大小改變事件 MaxLeft=window.innerWidth-Omain.offsetWidth; MaxTop=window.innerHeight-Omain.offsetHeight; }; /* 水平方向上：以向右為正方向 豎直方向上：以向下為正方向 */ let Vx=6;//3px/s let Vy=9;//4px/s let X=0,Y=0; ~~function move(){ X+=Vx; Y+=Vy; if (Y>=MaxTop) {Y=MaxTop;Vy=-Vy; } if (Y<=0) {Y=0;Vy=-Vy; } if (X>=MaxLeft) {X=MaxLeft;Vx=-Vx; } if (X<=0) {X=0;Vx=-Vx; } Omain.style.left=`${X}px`; Omain.style.top=`${Y}px`; createTail(X,Y);//生成拖尾 requestAnimationFrame(move); }(); function createTail(X,Y){ let node=document.createElement(’p’); node.classList.add(’show’); node.style.cssText=`left:${X+20}px;top:${Y+20}px`; document.body.appendChild(node); setTimeout(()=>{document.body.removeChild(node);node=null; },1200); } </script></body></html>
總結(jié)
到此這篇關(guān)于JS寫滑稽笑臉運動效果的文章就介紹到這了,更多相關(guān)js 滑稽笑臉內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. ASP.NET MVC遍歷驗證ModelState的錯誤信息2. 將properties文件的配置設(shè)置為整個Web應(yīng)用的全局變量實現(xiàn)方法3. asp(vbs)Rs.Open和Conn.Execute的詳解和區(qū)別及&H0001的說明4. jsp網(wǎng)頁實現(xiàn)貪吃蛇小游戲5. 用css截取字符的幾種方法詳解（css排版隱藏溢出文本）6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. asp中response.write("中文")或者js中文亂碼問題8. PHP設(shè)計模式中工廠模式深入詳解9. CSS hack用法案例詳解10. ThinkPHP5實現(xiàn)JWT Token認(rèn)證的過程(親測可用)
網(wǎng)公網(wǎng)安備