使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
程序员文章站
2023-08-17 15:59:34
现在什么都讲究追赶潮流，觉得 qq 登录窗口做的效果不错，既然刚学习 electron ，那么就用 electron 模仿一下。其实主要用到的就是 css3 的效果：边框圆...
现在什么都讲究追赶潮流，觉得 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翻转)，希望对大家有所帮助
上一篇： .Net 2.0 原汁原味读取注册表