首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onDecember 05, 2019

今天给大家分享一个特别有意思的软件卸载对话框，鼠标在整个对话框里移动时，中间的人脸会作出不同的变化，当鼠标悬停到“保留”按钮上时，人脸的表情会变得开心，当鼠标悬停到“卸载”按钮上面时，人脸的表情会变得不开心。

实现效果如下：

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

实现代码如下，首先是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" 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>

以下是页面引入的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

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();

总结

以上所述是小编给大家介绍的原生JS与CSS实现软件卸载对话框功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

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

- Author -

aiguangyuan

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
基于JS模仿windows文件按名称排序效果
Jun 29 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
js滚轮事件兼容性问题需要注意哪些
Nov 15 Javascript
Node.js中 __dirname 的使用介绍
Jun 19 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
May 06 Javascript
React精髓！一篇全概括小结(急速)
May 23 Javascript
微信小程序 弹窗输入组件的实现解析
Aug 12 Javascript
Vue快速实现通用表单验证功能
Dec 05 #Javascript
Vue组件通信中非父子组件传值知识点总结
Dec 05 #Javascript
基于javascript实现贪吃蛇经典小游戏
Apr 10 #Javascript
微信小程序登录时如何获取input框中的内容
Dec 04 #Javascript
微信小程序日历插件代码实例
Dec 04 #Javascript
微信小程序request请求封装，验签代码实例
Dec 04 #Javascript
vue中使用极验验证码的方法（附demo）
Dec 04 #Javascript
绝对定位(1) 相对定位(1) ECharts(3) props(1) GTID(1) ip连接(1) ref(1) postcss-px2rem(1) 游标(1) mixin(1)
You might like
DISCUZ 分页代码
2007/01/02 PHP
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
一个比较简单的PHP 分页分组类
2009/12/10 PHP
实测在class的function中include的文件中非php的global全局环境
2013/07/15 PHP
php实现简单文件下载的方法
2015/01/30 PHP
Laravel 5框架学习之表单
2015/04/08 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
PHP实现在对象之外访问其私有属性private及保护属性protected的方法
2017/11/20 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
Javascript中自动切换焦点实现代码
2012/12/15 Javascript
JavaScript中constructor()方法的使用简介
2015/06/05 Javascript
javascript比较两个日期相差天数的方法
2015/07/24 Javascript
javascript跨域的方法汇总
2015/10/23 Javascript
浅谈jQuery this和$(this)的区别及获取$(this)子元素对象的方法
2016/11/29 Javascript
原生JS实现跑马灯效果
2017/02/20 Javascript
Vue动态实现评分效果
2017/05/24 Javascript
js与jQuery实现的用户注册协议倒计时功能实例【三种方法】
2017/11/09 jQuery
js实现微信聊天界面
2020/08/09 Javascript
微信小程序实现电影App导航和轮播
2020/11/30 Javascript
利用python批量给云主机配置安全组的方法教程
2017/06/21 Python
Python中pow()和math.pow()函数用法示例
2018/02/11 Python
Python装饰器基础概念与用法详解
2018/12/22 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
Python产生一个数值范围内的不重复的随机数的实现方法
2019/08/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
简单掌握CSS3将文字描边及填充文字颜色的方法
2016/03/07 HTML / CSS
德国网上超市：myTime.de
2019/08/26 全球购物
十八届三中全会宣传方案
2014/02/21 职场文书
跑操口号
2014/06/12 职场文书
毕业大学生自荐信
2014/06/17 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书
培根随笔读书笔记
2015/07/01 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
银行服务理念口号
2015/12/25 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android