今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。
实现效果如下：
实现代码如下，首先是HTML：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生JS与CSS实现软件卸载对话框</title> <link href="https://www.jb51.net/css/confirm.css" > </head> <body> <section> <div> <a href="javascript: void(0)" ></a> <a href="javascript: void(0)" ></a> <a href="javascript: void(0)" ></a> <h1>软件卸载</h1> </div> <div> <h2>是否确实要卸载软件？</h2> <figure> <div></div> <div></div> <div></div> <div></div> <div></div> </figure> <a href="javascript: void(0)" >保留</a> <a href="javascript: void(0)" >卸载</a> </div> </section> <script src="https://www.jb51.net/js/confirm.js"></script> </body> </html>
以下是页面引入的CSS
* { box-sizing: border-box; font: inherit; } html { color: #333; font-size: 62.5%; } @media screen and (max-width: 480px) { html { font-size: 50%; } } html body { font-size: 2rem; padding: 0; margin: 0; width: 100vw; height: 100vh; background-image: linear-gradient(to left bottom, #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: 0px 10px 5px -3px rgba(0, 0, 0, 0.2); } .Confirm-Header { display: flex; align-items: center; position: relative; flex: 0 0 4rem; margin: 0 1rem; border-bottom: solid 1px rgba(0, 0, 0, 0.1); white-space: nowrap; } .Confirm-Header-Button { display: block; width: 1.6rem; height: 1.6rem; border-radius: 1rem; flex: 0 0 auto; transition: background-color 0.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: 2rem 4rem; } .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: 1rem 2rem; margin-bottom: 1rem; min-width: 10rem; text-align: center; transition: background-color 0.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: 0 0 auto; border: solid 2px #ecb23e; box-shadow: 0px 0px 5px rgba(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(to bottom, #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: 3px solid rgba(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: 3px solid #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: 0 0 0.5rem 0.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: 20rem 20rem 0 0; }
以下是页面引入的JS