HTML实现QQ2019登录动画,使用 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

QQ Login

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%;

}

确定

取消

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

}

};

})();

总结

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