原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能
更新時(shí)間：2019年12月05日 10:30:13 作者：aiguangyuan
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框功能，本段代碼是基于js 與css實(shí)現(xiàn)的，感興趣的朋友跟隨小編一起看看吧
今天給大家分享一個(gè)特別有意思的軟件卸載對(duì)話框，鼠標(biāo)在整個(gè)對(duì)話框里移動(dòng)時(shí)，中間的人臉會(huì)作出不同的變化，當(dāng)鼠標(biāo)懸停到“保留”按鈕上時(shí)，人臉的表情會(huì)變得開(kāi)心，當(dāng)鼠標(biāo)懸停到“卸載”按鈕上面時(shí)，人臉的表情會(huì)變得不開(kāi)心。
實(shí)現(xiàn)效果如下：
實(shí)現(xiàn)代碼如下，首先是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實(shí)現(xiàn)軟件卸載對(duì)話框</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">是否確實(shí)要卸載軟件？</h2>
<figure class="Boi" style="--happiness:0.9; --derp:1; --px:0.5; --py:0.5;">
<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>
以下是頁(yè)面引入的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;
}
以下是頁(yè)面引入的JS
const confirm = document.querySelector('.Confirm');
const boi = document.querySelector('.Boi');
const btnDelete = document.querySelector('.Confirm-Body-Button_Delete');
const btnCancel = document.querySelector('.Confirm-Body-Button_Cancel');
const current = {
happiness: 0.9,
derp: 1,
px: 0.5,
py: 0.5
};
const target = { ...current };
confirm.addEventListener('mousemove', onMouseMove);
confirm.addEventListener('mouseleave', onMouseLeave);
function onMouseMove({ clientX: x, clientY: y }) {
let dx1 = x - btnDelete.getBoundingClientRect().x - btnDelete.getBoundingClientRect().width * 0.5;
let dy1 = y - btnDelete.getBoundingClientRect().y - btnDelete.getBoundingClientRect().height * 0.5;
let dx2 = x - btnCancel.getBoundingClientRect().x - btnCancel.getBoundingClientRect().width * 0.5;
let dy2 = y - btnCancel.getBoundingClientRect().y - btnCancel.getBoundingClientRect().height * 0.5;
let px = (x - confirm.getBoundingClientRect().x) / confirm.getBoundingClientRect().width;
let py = (y - confirm.getBoundingClientRect().y) / confirm.getBoundingClientRect().height;
let distDelete = Math.sqrt(dx1 * dx1 + dy1 * dy1);
let distCancel = Math.sqrt(dx2 * dx2 + dy2 * dy2);
let happiness = Math.pow(distDelete / (distCancel + distDelete), 0.75);
target.happiness = happiness;
target.derp = 0;
target.px = px;
target.py = py;
}
function onMouseLeave() {
target.happiness = 0.9;
target.derp = 1;
target.px = 0.5;
target.py = 0.5;
}
function update() {
for (let prop in target) {
if (target[prop] === current[prop]) {
continue;
} else if (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();
總結(jié)
以上所述是小編給大家介紹的原生JS與CSS實(shí)現(xiàn)軟件卸載對(duì)話框功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
您可能感興趣的文章:
- JS實(shí)現(xiàn)彈出下載對(duì)話框及常見(jiàn)文件類(lèi)型的下載
- js提示框替代系統(tǒng)alert,自動(dòng)關(guān)閉alert對(duì)話框的實(shí)現(xiàn)方法
- BootStrap+Angularjs+NgDialog實(shí)現(xiàn)模式對(duì)話框
- js彈出框、對(duì)話框、提示框、彈窗實(shí)現(xiàn)方法總結(jié)(推薦)
- JavaScript彈出對(duì)話框的三種方式
- JS實(shí)現(xiàn)網(wǎng)頁(yè)每隔3秒彈出一次對(duì)話框的方法
- 利用javascript打開(kāi)模態(tài)對(duì)話框(示例代碼)
相關(guān)文章
支持各種瀏覽器的右下角浮動(dòng)窗口，需要的朋友可以參考下。2010-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)懸浮框效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法
這篇文章主要介紹了JS獲取及設(shè)置TextArea或input文本框選擇文本位置的方法,涉及TextArea及input文本操作技巧,需要的朋友可以參考下2015-03-03
本文主要介紹javascript如何定義對(duì)象數(shù)組，兩種方法，比較實(shí)用，希望能給大家做一個(gè)參考。2016-06-06
escape()、encodeURI()、encodeURIComponent()三種方法都能對(duì)一些影響URL完整性的特殊字符進(jìn)行過(guò)濾。2010-11-11
詳解微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)
最近在小程序的開(kāi)發(fā)過(guò)程中,需要用到雙向綁定,遇到報(bào)錯(cuò)才知道微信本身是不支持對(duì)象雙向綁定的,鏖戰(zhàn)一番找到解決方案,下面這篇文章主要給大家介紹了關(guān)于微信小程序中數(shù)據(jù)雙向綁定如何實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2023-05-05
科訊商業(yè)版中用到的ajax空間與分頁(yè)函數(shù)
科訊商業(yè)版中用到的ajax空間與分頁(yè)函數(shù)...2007-09-09
目前，幾乎所有業(yè)務(wù)的開(kāi)發(fā)構(gòu)建都會(huì)用到 webpack 。所以下面這篇文章主要給大家介紹了關(guān)于webpack構(gòu)建的詳細(xì)流程的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2018-01-01
fckeditor部署到weblogic出現(xiàn)xml無(wú)法讀取及樣式不能顯示問(wèn)題的解決方法
這篇文章主要介紹了fckeditor部署到weblogic出現(xiàn)xml無(wú)法讀取及樣式不能顯示問(wèn)題的解決方法,分析了問(wèn)題出現(xiàn)的原因及相關(guān)配置文件設(shè)置技巧,需要的朋友可以參考下2017-03-03
javascript 漢字轉(zhuǎn)拼音實(shí)現(xiàn)代碼
主要是提前定義了很多文字，這樣的方法不是很是，如果庫(kù)中沒(méi)有這個(gè)詞，是看不到相關(guān)信息的。2009-12-12