JS寫滑稽笑臉運(yùn)動效果
效果演示：
（就這玩意兒，差點(diǎn)寫崩了...）
代碼：
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>滑稽笑臉運(yùn)動</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寫滑稽笑臉運(yùn)動效果的文章就介紹到這了,更多相關(guān)js 滑稽笑臉內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！
相關(guān)文章：
1. 詳解CSS開發(fā)過程中的20個快速提升技巧2. asp讀取xml文件和記數(shù)3. .Net Core使用Coravel實(shí)現(xiàn)任務(wù)調(diào)度的完整步驟4. 如何使用ASP.NET Core 配置文件5. 常見 PHP ORM 框架與簡單代碼實(shí)現(xiàn)6. 一篇文章帶你了解JavaScript-語句7. PHP下載CSS文件中的圖片8. ASP+ajax實(shí)現(xiàn)頂一下、踩一下同支持與反對的實(shí)現(xiàn)代碼9. .Net core 的熱插拔機(jī)制的深入探索及卸載問題求救指南10. XML 取得元素的字符數(shù)據(jù)
網(wǎng)公網(wǎng)安備