原生JS与CSS实现软件卸载对话框功能

2023-08-04 23:34:04 81

*{ box-sizing:border-box; font:inherit; } html{ color:#333; font-size:62.5%; } @mediascreenand(max-width:480px){ html{ font-size:50%; } } htmlbody{ font-size:2rem; padding:0; margin:0; width:100vw; height:100vh; background-image:linear-gradient(toleftbottom,#444,#222); font-family:'Rubik',sans-serif; } .Confirm{ position:absolute; display:flex; flex-direction:column; overflow:hidden; top:50%; left:50%; transform:translate(-50%,-50%); width:72rem; max-width:100%; min-width:34rem; max-height:100%; height:46rem; background-color:#ccc; border-radius:1rem; box-shadow:0px10px5px-3pxrgba(0,0,0,0.2); } .Confirm-Header{ display:flex; align-items:center; position:relative; flex:004rem; margin:01rem; border-bottom:solid1pxrgba(0,0,0,0.1); white-space:nowrap; } .Confirm-Header-Button{ display:block; width:1.6rem; height:1.6rem; border-radius:1rem; flex:00auto; transition:background-color0.3s; } .Confirm-Header-Button:not(:last-of-type){ margin-right:1rem; } .Confirm-Header-Button_Close{ background-color:#a43; } .Confirm-Header-Button_Close:hover{ background-color:#c85a48; } .Confirm-Header-Button_Maximize{ background-color:#cb3; } .Confirm-Header-Button_Maximize:hover{ background-color:#d6c95c; } .Confirm-Header-Button_Minimize{ background-color:#6a4; } .Confirm-Header-Button_Minimize:hover{ background-color:#81c061; } .Confirm-Header-Title{ margin:0; padding:0; transform:translateX(50%); margin-right:50%; margin-left:auto; } .Confirm-Body{ flex:1; display:flex; align-items:flex-end; justify-content:space-between; position:relative; margin:2rem4rem; } .Confirm-Body-Title{ margin:0; padding:0; position:absolute; transform:translateY(-50%); top:5%; text-align:center; width:100%; } .Confirm-Body-Button, .Confirm-Body-Button:link, .Confirm-Body-Button:visited{ color:#fff; border-radius:1rem; text-decoration:none; padding:1rem2rem; margin-bottom:1rem; min-width:10rem; text-align:center; transition:background-color0.3s; } .Confirm-Body-Button_Delete{ background-color:#a43; } .Confirm-Body-Button_Delete:hover{ background-color:#c85a48; } .Confirm-Body-Button_Cancel{ background-color:#6a4; } .Confirm-Body-Button_Cancel:hover{ background-color:#81c061; } .Boi{ --happiness:0.9; --derp:1; --px:0.5; --py:0.5; width:22rem; max-width:100%; height:22rem; top:50%; left:50%; transform:translate(-50%,-50%); background-image:radial-gradient(#f7e0b2,#eb5); border-radius:100%; overflow:hidden; margin:0; align-self:center; flex:00auto; border:solid2px#ecb23e; box-shadow:0px0px5pxrgba(0,0,0,0.2); } .Boi, .Boi*{ position:absolute; } .Boi::before{ content:''; display:block; width:100%; height:100%; top:0; left:0; background-image:linear-gradient(tobottom,#5a8,rgba(85,170,136,0)); opacity:calc(1-var(--happiness)); } .Boi-Blush{ width:20%; height:10%; background-color:rgba(255,100,100,0.3); border:3pxsolidrgba(255,100,100,0.3); top:calc(45%+var(--py)*10%); border-radius:100%; opacity:calc(var(--happiness)*var(--happiness)*0.9+0.1); } .Boi-Blush_L{ left:calc(7%+var(--px)*2%); } .Boi-Blush_R{ right:calc(9%-var(--px)*2%); } .Boi-Eye{ width:calc(26%-var(--happiness)*2%); height:calc(26%-var(--happiness)*2%); background-color:#f6f6f6; border-radius:100%; top:calc(25%+var(--py)*10%); overflow:hidden; } .Boi-Eye_L{ left:calc(18%+var(--px)*4%); } .Boi-Eye_L::after{ transform:translate(calc((var(--px)+var(--derp)*0.5)*100%),calc((var(--py)+var(--derp)*0.5)*100%)); } .Boi-Eye_R{ right:calc(22%-var(--px)*4%); } .Boi-Eye_R::after{ transform:translate(calc((var(--px)+var(--derp)*-0.3)*100%),calc((var(--py)+var(--derp)*-0.3)*100%)); } .Boi-Eye::after{ content:''; display:block; background-color:#421; width:calc(55%-var(--happiness)*10%); height:calc(55%-var(--happiness)*10%); border-radius:100%; } .Boi-Mouth{ width:calc(51%-var(--happiness)*2%); height:calc(26%-var(--happiness)*2%); background-color:#a33; border-radius:calc((1-var(--happiness))*10em)calc((1-var(--happiness))*10em)calc(var(--happiness)*16em)calc(var(--happiness)*16em); top:calc(57.5%+var(--py)*5%); left:calc(47.5%+var(--px)*5%); transform:translateX(-50%); overflow:hidden; border:3pxsolid#962d2d; -webkit-mask-image:-webkit-radial-gradient(white,black); } .Boi-Mouth::before{ content:''; display:block; position:absolute; width:20%; height:20%; top:0; left:50%; background-color:white; border-radius:000.5rem0.5rem; } .Boi-Mouth::after{ content:''; display:block; position:absolute; width:60%; height:50%; left:10%; bottom:0; background-color:rgba(0,0,0,0.2); border-radius:20rem20rem00; }

constconfirm=document.querySelector('.Confirm'); constboi=document.querySelector('.Boi'); constbtnDelete=document.querySelector('.Confirm-Body-Button_Delete'); constbtnCancel=document.querySelector('.Confirm-Body-Button_Cancel'); constcurrent={ happiness:0.9, derp:1, px:0.5, py:0.5 }; consttarget={...current}; confirm.addEventListener('mousemove',onMouseMove); confirm.addEventListener('mouseleave',onMouseLeave); functiononMouseMove({clientX:x,clientY:y}){ letdx1=x-btnDelete.getBoundingClientRect().x-btnDelete.getBoundingClientRect().width*0.5; letdy1=y-btnDelete.getBoundingClientRect().y-btnDelete.getBoundingClientRect().height*0.5; letdx2=x-btnCancel.getBoundingClientRect().x-btnCancel.getBoundingClientRect().width*0.5; letdy2=y-btnCancel.getBoundingClientRect().y-btnCancel.getBoundingClientRect().height*0.5; letpx=(x-confirm.getBoundingClientRect().x)/confirm.getBoundingClientRect().width; letpy=(y-confirm.getBoundingClientRect().y)/confirm.getBoundingClientRect().height; letdistDelete=Math.sqrt(dx1*dx1+dy1*dy1); letdistCancel=Math.sqrt(dx2*dx2+dy2*dy2); lethappiness=Math.pow(distDelete/(distCancel+distDelete),0.75); target.happiness=happiness; target.derp=0; target.px=px; target.py=py; } functiononMouseLeave(){ target.happiness=0.9; target.derp=1; target.px=0.5; target.py=0.5; } functionupdate(){ for(letpropintarget){ if(target[prop]===current[prop]){ continue; }elseif(Math.abs(target[prop]-current[prop])<0.01){ current[prop]=target[prop]; }else{ current[prop]+=(target[prop]-current[prop])*0.1; } boi.style.setProperty(`--${prop}`,current[prop]); } requestAnimationFrame(update); } update();

原生JS与CSS实现软件卸载对话框功能

热门推荐

随机推荐