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. 基于PHP做個(gè)圖片防盜鏈2. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)3. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁4. XML在語音合成中的應(yīng)用5. jscript與vbscript 操作XML元素屬性的代碼6. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解7. ASP.NET MVC把數(shù)據(jù)庫中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字8. 如何使用ASP.NET Core 配置文件9. .NET中實(shí)現(xiàn)對象數(shù)據(jù)映射示例詳解10. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車輛管理系統(tǒng)
網(wǎng)公網(wǎng)安備