最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
问答文章1 问答文章501 问答文章1001 问答文章1501 问答文章2001 问答文章2501 问答文章3001 问答文章3501 问答文章4001 问答文章4501 问答文章5001 问答文章5501 问答文章6001 问答文章6501 问答文章7001 问答文章7501 问答文章8001 问答文章8501 问答文章9001 问答文章9501
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:懂视网 责编:小采 时间:2020-11-27 22:05:57
文档

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

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转):现在什么都讲究追赶潮流,觉得 QQ 登录窗口做的效果不错,既然刚学习 electron ,那么就用 electron 模仿一下。其实主要用到的就是 CSS3 的效果:边框圆角、阴影,3D变换。对,就这么简单。先上效果: 下面是关键代码: app.js 'use st
推荐度:
导读使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转):现在什么都讲究追赶潮流,觉得 QQ 登录窗口做的效果不错,既然刚学习 electron ,那么就用 electron 模仿一下。其实主要用到的就是 CSS3 的效果:边框圆角、阴影,3D变换。对,就这么简单。先上效果: 下面是关键代码: app.js 'use st

现在什么都讲究追赶潮流,觉得 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翻转),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文档

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

使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转):现在什么都讲究追赶潮流,觉得 QQ 登录窗口做的效果不错,既然刚学习 electron ,那么就用 electron 模仿一下。其实主要用到的就是 CSS3 的效果:边框圆角、阴影,3D变换。对,就这么简单。先上效果: 下面是关键代码: app.js 'use st
推荐度:
标签: QQ 登录 使用
  • 热门焦点

最新推荐

猜你喜欢

热门推荐

专题
Top