使用使用 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.
