使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
现在什么都讲究追赶潮流，觉得 QQ 登录窗口做的效果不错，既然刚学习 electron ，那么就用 electron 模仿一下。其实主要用到的就是 CSS3 的效果：边框圆角、阴影，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翻转)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
electron实现qq快捷登录的方法示例
之前本来想不写这个功能的,结果客户死活要qq登录! 实在没办法就写了,顺便写个文章! 在写之前有两个问题: 1: 打开qq授权页面点击页面中的链接会又打开一个页面! ..... 2: 授权之后是否成功很难去判断 不过脑海中有一个想法就是,electron就是一个类似于浏览器一样,既然是浏览器那肯定可以阻止链接的点击 也可以判断状态! 就去啃文档了!!! 推荐大家去w3c去看文档 比较全 而且速度较快 文档也比较新:https://www.w3cschool.cn/electronmanual/
-
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
现在什么都讲究追赶潮流,觉得 QQ 登录窗口做的效果不错,既然刚学习 electron ,那么就用 electron 模仿一下.其实主要用到的就是 CSS3 的效果:边框圆角.阴影,3D变换.对,就这么简单.先上效果: 下面是关键代码: app.js 'use strict'; const { app, BrowserWindow } = require('electron') const path = require('path') const url = require('url') //
-
Android实现背景可滑动登录界面 (不压缩背景弹出键盘)
废话不多说,先看下实现后的效果: 实现思路 看到上边 gif 图的效果,主要列举一下实现过程过程中遇到的难点. 如何使键盘弹出时候不遮挡底部登录布局: 当键盘弹出的时候如何不压缩背景图片或者背景延伸至「屏幕以外」: 从 「 windowSoftInputMode 」 说起 相信大家都清楚,Google 官方提供给开发者控制软键盘显示隐藏的方法不多,「windowSoftInputMode」算是我们可控制的软键盘弹出模式的方法之一.关于其属性的说明Google 官方和网上的教程说了很多,他的属性值
-
Java Swing仿QQ登录界面效果
本文实例为大家分享了Java Swing仿QQ登录界面展示的具体代码,供大家参考,具体内容如下 闲来无事将早些时候已实现的QQ登录界面再实现了一遍,纯手工打造(意思是没有用NetBeans.MyEclipse的拖动功能). 源代码如下: package ibees.qq; import java.awt.BorderLayout; import java.net.URL; import javax.swing.ImageIcon; import javax.swing.JButton; impo
-
Android中使用Kotlin实现一个简单的登录界面
Kotlin 是一种在 Java 虚拟机上运行的静态类型编程语言,被称之为 Android 世界的Swift,由 JetBrains 设计开发并开源. Kotlin 可以编译成Java字节码,也可以编译成 JavaScript,方便在没有 JVM 的设备上运行. 在Google I/O 2017中,Google 宣布 Kotlin 成为 Android 官方开发语言. 刚接触Kotlin的第一天,仿照QQ的登录界面,先写一个简单的登录界面,虽然笔者用的不是很熟,还在慢慢摸索,但是Kotlin是真
-
electron vue 模仿qq登录界面功能实现
目录 1.使用vuecli创建vue项目 2.安装electron 3.vue项目安装Electron-builder打包工具 4.在vue项目的src下有个background.js文件 5.安装remote模块 6.代码 7.效果图 1.使用vuecli创建vue项目 我用的vue2 vue create qq_test 2.安装electron npm install electron -g //or npm install electron@12.0.11 //老版本 3.vue项目安装
-
thinkPHP5项目中实现QQ第三方登录功能
本文实例讲述了thinkPHP5项目中实现QQ第三方登录功能.分享给大家供大家参考,具体如下: 最近用thinkPHP 5框架做了一个婚纱店的项目,在开发过程中需要用到第三方登录,腾讯官方给的案例是几个文件相互包含实现的,放到tp5里面很悲催的发现在控制器中不能通过include或者require完成预期功能,想要用腾讯官方封的类就必须对其进行修改,修改如下: 1. 找到官方SDK里面的核心文件 框架外使用的时候是include 'qqConnectAPI.php',打开这个文件可以看到它是包含
-
Python的Flask框架应用程序实现使用QQ账号登录的方法
Flask-OAuthlib是OAuthlib的Flask扩展实现, 项目地址: https://github.com/lepture/flask-oauthlib 主要特性: 支持OAuth 1.0a, 1.0, 1.1, OAuth2客户端 友好的API(和Flask-OAuth一样) 与Flask直接整合 等等-- Flask-OAuthlib提供了多个开放平台的示例代码,比如Google, Facebook, Twiter, Github, Dropbox, 豆瓣, 微博等,只是暂时没有
-
用VBScript制作QQ自动登录的脚本代码
一直用的是狂人版的QQ,也用它附赠的自动登录器很久了,不过最近一版的狂人QQ不知为何取消了自动登录组件.好在QQ2009已经能够同时记住多个号码的密码,虽然要多点击几下,但依然能够实现免输入密码登录. 谁知最近不知道电脑发了什么疯,每隔一段时间,QQ记住的密码就会被清空.我的两个QQ号密码都设置得比较复杂,每次登录要输入两遍密码实在是件痛苦的事情,于是决定自制一个登录器. 在网上找了许久,发现了一个用VBS制作QQ登录脚本的办法: 复制代码 代码如下: set WshShell = WScrip
-
使用java swing实现qq登录界面示例分享
用Java Swing做的一个QQ登录界面 复制代码 代码如下: import java.awt.Container;import java.awt.Image;import java.awt.event.ActionEvent;import java.awt.event.ActionListener; import javax.swing.ImageIcon;import javax.swing.JButton;import javax.swing.JCheckBox;import javax
-
iOS QQ第三方登录实现
本文实例为大家分享了iOS QQ第三方登录实现代码,供大家参考,具体内容如下 一.准备工作 1.到QQ开放平台(http://connect.qq.com/ )注册成为开发者,申请appkey, 2.在URL Types中添加QQ的AppID,其格式为:"tencent" + AppID 例如tencent1104463316 二.配置AppDelegate.m 1.导入<TencentOpenAPI/QQApiInterface.h> 和<TencentOpe