今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。
实现效果如下：
实现代码如下，首先是HTML：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>原生JS与CSS实现软件卸载对话框</title> <link rel="stylesheet" href="css/confirm.css" rel="external nofollow" ></head><body> <section class="Confirm"> <div class="Confirm-Header"> <a class="Confirm-Header-Button Confirm-Header-Button_Close" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a class="Confirm-Header-Button Confirm-Header-Button_Minimize" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <a class="Confirm-Header-Button Confirm-Header-Button_Maximize" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> <h1 class="Confirm-Header-Title">软件卸载</h1> </div> <div class="Confirm-Body"> <h2 class="Confirm-Body-Title">是否确实要卸载软件？</h2> <figure class="Boi" > <div class="Boi-Blush Boi-Blush_L"></div> <div class="Boi-Blush Boi-Blush_R"></div> <div class="Boi-Eye Boi-Eye_L"></div> <div class="Boi-Eye Boi-Eye_R"></div> <div class="Boi-Mouth"></div> </figure> <a class="Confirm-Body-Button Confirm-Body-Button_Cancel" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >保留</a> <a class="Confirm-Body-Button Confirm-Body-Button_Delete" href="javascript: void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >卸载</a> </div> </section> <script src="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;}
新闻热点
疑难解答
