使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)


Posted in Javascript onOctober 23, 2018

现在什么都讲究追赶潮流,觉得 QQ 登录窗口做的效果不错,既然刚学习 electron ,那么就用 electron 模仿一下。其实主要用到的就是 CSS3 的效果:边框圆角、阴影,3D变换。对,就这么简单。先上效果:

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)

下面是关键代码:

app.js

'use strict';
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win
function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 495, height: 470, /*skipTaskbar: true,*/ frame: false,
    resizable: false, transparent: true, show: false, alwaysOnTop: true
  })
  win.once('ready-to-show', () => {
    win.show()
  })
  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, '/app/index.html'),
    protocol: 'file:',
    slashes: true
  }))
  // Open the DevTools.
  //win.webContents.openDevTools()
  // Emitted when the window is closed.
  win.on('closed', () => {
    // Dereference the window object, usually you would store windows
    // in an array if your app supports multi windows, this is the time
    // when you should delete the corresponding element.
    win = null
  })
}
//app.disableHardwareAcceleration();
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', createWindow)
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (win === null) {
    createWindow()
  }
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

index.html

<!DOCTYPE html>
<html style="margin:0; padding:0;height:100%;">
<head>
  <meta charset="UTF-8">
  <title>QQ Login</title>
  <style>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }

    body {
      perspective: 800px;
      -webkit-app-region: drag;
      -webkit-user-select: none;
    }

    input[type="submit"],
    input[type="reset"],
    input[type="button"],
    input[type="text"],
    button,
    textarea {
      -webkit-app-region: no-drag;
    }

    .shadow {
      box-shadow: 0 0 10px rgba(0, 0, 0, 1);
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 4px;
    }

    #login-back {
      position: relative;
      border-radius: 3px 3px 0 0;
      left: 0;
      right: 0;
      height: 180px;
    }

    #card {
      left: 33px;
      top: 70px;
      right: 33px;
      bottom: 70px;
      background-color: #ebf2f9;
      position: absolute;
      -webkit-transition: -webkit-transform .6s ease-in-out;
      transition: transform .6s ease-in-out;
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      border-radius: 4px;
    }

      #card.flipped {
        -webkit-transform: rotateY( 180deg );
        transform: rotateY( 180deg );
      }

      #card .front {
        background: url(imgs/login-back.gif) no-repeat;
        background-size: 100% 180px;
        position: absolute;
        transform: rotateY(0deg);
      }

      #card .back {
        position: absolute;
        background: url(imgs/login-back.gif) no-repeat;
        background-size: 100% 180px;
        -webkit-transform: rotateY( -180deg );
        transform: rotateY( -180deg );
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        z-index:2;
      }

    .sys-control-box {
      float:right;
      width:84px;
      border-radius: 0 3px 0 0;
    }

    .sys-btn {
      width: 28px;
      height: 28px;
      border: none;
      outline: none;
      margin: 0;
    }

    .sys-btn-mini {
      background: url(imgs/btn_mini_normal.png) no-repeat;
    }

      .sys-btn-mini:hover {
        background: url(imgs/btn_mini_highlight.png) no-repeat;
      }

      .sys-btn-mini:active {
        background: url(imgs/btn_mini_down.png) no-repeat;
      }

    .sys-btn-close {
      border-radius: 0 3px 0 0;
      background: url(imgs/btn_close_normal.png) no-repeat;
    }

      .sys-btn-close:hover {
        background: url(imgs/btn_close_highlight.png) no-repeat;
      }

      .sys-btn-close:active {
        background: url(imgs/btn_close_down.png) no-repeat;
      }

    .sys-btn-set {
      background: url(imgs/btn_set_normal.png) 1px 0 no-repeat;
    }

      .sys-btn-set:hover {
        background: url(imgs/btn_set_hover.png) 1px 0 no-repeat;
      }

      .sys-btn-set:active {
        background: url(imgs/btn_set_press.png) 1px 0 no-repeat;
      }

    .btn {
      width: 78px;
      height: 28px;
      background: url(imgs/setting_btn_normal.png) no-repeat;
      background-size: 100% 100%;
      border: none;
      outline: none;
      margin: 0;
    }

      .btn:hover, .btn:active {
        background: url(imgs/setting_btn_hover.png) no-repeat;
        background-size: 100% 100%;
      }

      .btn:focus {
        background: url(imgs/setting_btn_hover.png) no-repeat;
        background-size: 100% 100%;
      }
  </style>
</head>
<body>
  <div id="card">
    <div id="front" class="front shadow">
      <div class="sys-control-box">
        <button id="btn-set" class="sys-btn sys-btn-set" title="设置"></button><button class="sys-btn sys-btn-mini" title="最小化"></button><button class="sys-btn sys-btn-close" title="关闭"></button>
      </div>
    </div>
    <div id="back" class="back shadow">
      <div style="width:100%;height:100%; border-radius: 4px;background:-webkit-linear-gradient(top, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.00) 6%, #ebf2f9 12%, #ebf2f9 90%, #cde2f2 90%, #cde2f2 100%);">
        <div class="sys-control-box" style="width:56px;">
          <button class="sys-btn sys-btn-mini" title="最小化"></button><button class="sys-btn sys-btn-close" title="关闭"></button>
        </div>
        <button id="btn-ok" style="position:absolute; right:91px; bottom:2px;" class="btn">确定</button>
        <button id="btn-cancel" style="position:absolute; right:10px; bottom:2px;" class="btn">取消</button>
      </div>
    </div>
  </div>
  <script>
    Element.prototype.hasClassName = function (a) {
      return new RegExp("(?:^|\\s+)" + a + "(?:\\s+|$)").test(this.className);
    };

    Element.prototype.addClassName = function (a) {
      if (!this.hasClassName(a)) {
        this.className = [this.className, a].join(" ");
      }
    };

    Element.prototype.removeClassName = function (b) {
      if (this.hasClassName(b)) {
        var a = this.className;
        this.className = a.replace(new RegExp("(?:^|\\s+)" + b + "(?:\\s+|$)", "g"), " ");
      }
    };

    Element.prototype.toggleClassName = function (a) {
      this[this.hasClassName(a) ? "removeClassName" : "addClassName"](a);
    };

    //var init = function () {
    //  var card = document.getElementById('card');

    //  document.getElementById('front').addEventListener('click', function () {
    //    card.toggleClassName('flipped');
    //  }, false);

    //  document.getElementById('back').addEventListener('click', function () {
    //    card.toggleClassName('flipped');
    //  }, false);
    //};

    //window.addEventListener('DOMContentLoaded', init, false);
    (function () {

      const remote = require('electron').remote;

      function init() {

        function flip() {
          if (frontShow == 2) {
            document.getElementById('front').style.display = 'block';
          }
          else {
            document.getElementById('back').style.display = 'block';
          }
          card.toggleClassName('flipped');
        };

        var btn_minis = document.getElementsByClassName("sys-btn-mini");
        for (var i = 0; i < btn_minis.length; i++) {
          btn_minis[i].addEventListener("click", function (e) {
            const window = remote.getCurrentWindow();
            window.minimize();
          });
        }

        //document.getElementById("sys-btn-maxi").addEventListener("click", function (e) {
        //  const window = remote.getCurrentWindow();
        //  if (!window.isMaximized()) {
        //    window.maximize();
        //  } else {
        //    window.unmaximize();
        //  }
        //});

        var btn_closes = document.getElementsByClassName("sys-btn-close");
        for (var i = 0; i < btn_closes.length; i++) {
          btn_closes[i].addEventListener("click", function (e) {
            const window = remote.getCurrentWindow();
            window.close();
          });
        }   

        var card = document.getElementById('card');
        var frontShow = 1;

        var btn_sets = document.getElementsByClassName("sys-btn-set");
        for (var i = 0; i < btn_sets.length; i++) {
          btn_sets[i].addEventListener('click', function () { flip(); }, false);
        } 

        card.addEventListener('transitionend', function () {
          if (frontShow == 1) {
            frontShow = 2;
            document.getElementById('front').style.display = 'none';
          }
          else {
            document.getElementById('back').style.display = 'none';
            frontShow = 1;
          }
        }, false);

        document.getElementById('btn-ok').addEventListener('click', function () { flip(); }, false);
        document.getElementById('btn-cancel').addEventListener('click', function () { flip(); }, false);
      };

      document.onreadystatechange = function () {
        if (document.readyState == "complete") {
          init();
        }
      };
    })();
  </script>
</body>
</html>

最后整个项目的源代码:https://github.com/starts2000/ElectronQQLogin

总结

以上所述是小编给大家介绍的使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在JavaScript中使用inline函数的问题
Mar 08 Javascript
javascript之解决IE下不渲染的bug
Jun 29 Javascript
图片自动缩小 点击放大
Jul 07 Javascript
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
Feb 18 Javascript
JQuery datepicker 使用方法
May 20 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery实现将页面上HTML标签换成另外标签的方法
Jun 09 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
纯原生js实现table表格的增删
Jan 05 Javascript
uniapp实现可以左右滑动导航栏
Oct 21 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 #Javascript
React 路由懒加载的几种实现方案
Oct 23 #Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 #Javascript
详解React 的几种条件渲染以及选择
Oct 23 #Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 #Javascript
彻底弄懂 JavaScript 执行机制
Oct 23 #Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 #Javascript
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP 7安装使用体验之性能大提升,兼容性强,扩展支持不够(升级PHP要谨慎)
2017/07/27 PHP
thinkphp5使用无限极分类
2019/02/18 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
2019/10/17 PHP
javascript css在IE和Firefox中区别分析
2009/02/18 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
firefox firebug中文入门教程 脚本之家新年特别版
2010/01/02 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JavaScript中的toDateString()方法使用详解
2015/06/12 Javascript
更高效的使用JQuery 这里总结了8个小技巧
2016/04/13 Javascript
H5用户注册表单页 注册模态框!
2016/09/17 Javascript
jQuery实现图片轮播效果代码
2016/09/27 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
VScode格式化ESlint方法(最全最好用方法)
2019/09/10 Javascript
js实现简单的日历显示效果函数示例
2019/11/25 Javascript
JavaScript中的类型检查
2020/02/03 Javascript
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
Python实现文件复制删除
2016/04/19 Python
python抓取网页中链接的静态图片
2018/01/29 Python
解决paramiko执行命令超时的问题
2020/04/16 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
Python实现http接口自动化测试的示例代码
2020/10/09 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
物流管理专业大学生自荐信
2013/10/04 职场文书
小学生美德少年事迹
2014/02/02 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
2014年大学生社会实践自我鉴定
2014/09/26 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
免职通知
2015/04/23 职场文书
搞笑婚礼主持词开场白
2015/11/24 职场文书
如何用python绘制雷达图
2021/04/24 Python
Pandas自定义选项option设置
2021/07/25 Python
Nginx动静分离配置实现与说明
2022/04/07 Servers