瞎折腾
说一下今儿我毕设登录界面干了啥
反正写出来也没人用，就是留着写个论文跑起来给老师看，所以我决定，去他的干净整洁中规中矩的常用配色界面风格，我想怎么玩就怎么玩，于是登录界面被我折腾成了这样：
特效简单不多，我比较喜欢它的颜色
特效
鼠标样式这个改了个默认，加了个点击效果代码如下
鼠标样子：
<style> .............. body { ....................... cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/normal.cur), default; cursor: url(https://files-cdn.cnblogs.com/files/zouwangblog/cursor.ico), auto; } a:hover { cursor: url(https://cdn.jsdelivr.net/gh/fz6m/Private-web@1.5/image/cursor/ayuda.cur) 15 15, pointer; }
点击：
mose.js:
onload = function() { var click_cnt = 0, $html = document.getElementsByTagName('html')[0], $body = document.getElementsByTagName('body')[0] $html.onclick = function(e) { var $elem = document.createElement('b') ;($elem.style.color = '#FFC0CB'), ($elem.style.zIndex = 9999), ($elem.style.position = 'absolute'), ($elem.style.select = 'none') var x = e.pageX, y = e.pageY switch ( (($elem.style.left = x - 10 + 'px'), ($elem.style.top = y - 20 + 'px'), clearInterval(anim), ++click_cnt) ) { case 2: $elem.innerText = '🍉' break case 4: $elem.innerText = 'OωO' break case 6: $elem.innerText = '🍋' break case 8: $elem.innerText = '(๑•́ ∀ •̀๑)' break case 10: $elem.innerText = '🍨' break case 12: $elem.innerText = '(๑•́ ₃ •̀๑)' break case 14: $elem.innerText = '🍤' break case 16: $elem.innerText = '(๑•̀_•́๑)' break case 18: $elem.innerText = '🍬' break case 20: $elem.innerText = '（￣へ￣）' break case 22: $elem.innerText = '🍺' break case 24: $elem.innerText = '(╯°口°)╯(┴—┴' break case 26: $elem.innerText = '🍥' break case 28: $elem.innerText = '૮( ᵒ̌皿ᵒ̌ )ა' break case 30: $elem.innerText = '🍮' break case 32: $elem.innerText = '╮(｡>口<｡)╭' break case 34: $elem.innerText = '🍓' break case 36: $elem.innerText = '( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃' break case 38: $elem.innerText = '🍇' break case 40: $elem.innerText = '🍉' break case 42: $elem.innerText = '(ꐦ°᷄д°᷅)' break case 44: $elem.innerText = '🍉' break case 46: $elem.innerText = 'OωO' break case 48: $elem.innerText = '🍋' break case 50: $elem.innerText = '(๑•́ ∀ •̀๑)' break case 52: $elem.innerText = '🍨' break case 54: $elem.innerText = '(๑•́ ₃ •̀๑)' break case 56: $elem.innerText = '🍤' break case 58: $elem.innerText = '(๑•̀_•́๑)' break case 60: $elem.innerText = '🍬' break case 62: $elem.innerText = '（￣へ￣）' break case 64: $elem.innerText = '🍺' break case 66: $elem.innerText = '(╯°口°)╯(┴—┴' break case 68: $elem.innerText = '🍥' break case 70: $elem.innerText = '૮( ᵒ̌皿ᵒ̌ )ა' break case 72: $elem.innerText = '🍮' break case 74: $elem.innerText = '╮(｡>口<｡)╭' break case 76: $elem.innerText = '🍓' break case 78: $elem.innerText = '( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃' break case 80: $elem.innerText = '🍇' break case 82: $elem.innerText = '🍉' break case 84: $elem.innerText = '(ꐦ°᷄д°᷅)' break default: $elem.innerText = '🌸' } $elem.style.fontSize = 10 * Math.random() + 8 + 'px' var increase = 0, anim setTimeout(function() { anim = setInterval(function() { 150 == ++increase && (clearInterval(anim), $body.removeChild($elem)), ($elem.style.top = y - 20 - increase + 'px'), ($elem.style.opacity = (150 - increase) / 120) }, 8) }, 70), $body.appendChild($elem) } }
底部文字跳动
<span class="my-face">{{ this.runTime }}ღゝ◡╹)ノ♡</span>
jump.css：
/* start */ .my-face { animation: my-face 5s infinite ease-in-out; color: #00f1ff; display: inline-block; margin: 0 5px; } @-webkit-keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(0, -0.5px) rotate(-1.5deg); transform: translate(0, -0.5px) rotate(-1.5deg); } 18%, 22% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 26%, 50% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 28% { -webkit-transform: translate(0, 0.5px) rotate(1.5deg); transform: translate(0, 0.5px) rotate(1.5deg); } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg); } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 48%, 74%, 82% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 58% { -webkit-transform: translate(0, 0.5px) rotate(2.5deg); transform: translate(0, 0.5px) rotate(2.5deg); } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg); } 90% { -webkit-transform: translate(0, 2.5px) rotate(-0.5deg); transform: translate(0, 2.5px) rotate(-0.5deg); } 92% { -webkit-transform: translate(0, 0.5px) rotate(-0.5deg); transform: translate(0, 0.5px) rotate(-0.5deg); } 94% { -webkit-transform: translate(0, 2.5px) rotate(0.5deg); transform: translate(0, 2.5px) rotate(0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } @keyframes my-face { 2%, 24%, 80% { -webkit-transform: translate(0, 1.5px) rotate(1.5deg); transform: translate(0, 1.5px) rotate(1.5deg); } 4%, 68%, 98% { -webkit-transform: translate(0, -1.5px) rotate(-0.5deg); transform: translate(0, -1.5px) rotate(-0.5deg); } 38%, 6% { -webkit-transform: translate(0, 1.5px) rotate(-1.5deg); transform: translate(0, 1.5px) rotate(-1.5deg); } 8%, 86% { -webkit-transform: translate(0, -1.5px) rotate(-1.5deg); transform: translate(0, -1.5px) rotate(-1.5deg); } 10%, 72% { -webkit-transform: translate(0, 2.5px) rotate(1.5deg); transform: translate(0, 2.5px) rotate(1.5deg); } 12%, 64%, 78%, 96% { -webkit-transform: translate(0, -0.5px) rotate(1.5deg); transform: translate(0, -0.5px) rotate(1.5deg); } 14%, 54% { -webkit-transform: translate(0, -1.5px) rotate(1.5deg); transform: translate(0, -1.5px) rotate(1.5deg); } 16% { -webkit-transform: translate(0, -0.5px) rotate(-1.5deg); transform: translate(0, -0.5px) rotate(-1.5deg); } 18%, 22% { -webkit-transform: translate(0, 0.5px) rotate(-1.5deg); transform: translate(0, 0.5px) rotate(-1.5deg); } 20%, 36%, 46% { -webkit-transform: translate(0, -1.5px) rotate(2.5deg); transform: translate(0, -1.5px) rotate(2.5deg); } 26%, 50% { -webkit-transform: translate(0, 0.5px) rotate(0.5deg); transform: translate(0, 0.5px) rotate(0.5deg); } 28% { -webkit-transform: translate(0, 0.5px) rotate(1.5deg); transform: translate(0, 0.5px) rotate(1.5deg); } 30%, 40%, 62%, 76%, 88% { -webkit-transform: translate(0, -0.5px) rotate(2.5deg); transform: translate(0, -0.5px) rotate(2.5deg); } 32%, 34%, 66% { -webkit-transform: translate(0, 1.5px) rotate(-0.5deg); transform: translate(0, 1.5px) rotate(-0.5deg); } 42% { -webkit-transform: translate(0, 2.5px) rotate(-1.5deg); transform: translate(0, 2.5px) rotate(-1.5deg); } 44%, 70% { -webkit-transform: translate(0, 1.5px) rotate(0.5deg); transform: translate(0, 1.5px) rotate(0.5deg); } 48%, 74%, 82% { -webkit-transform: translate(0, -0.5px) rotate(0.5deg); transform: translate(0, -0.5px) rotate(0.5deg); } 52%, 56%, 60% { -webkit-transform: translate(0, 2.5px) rotate(2.5deg); transform: translate(0, 2.5px) rotate(2.5deg); } 58% { -webkit-transform: translate(0, 0.5px) rotate(2.5deg); transform: translate(0, 0.5px) rotate(2.5deg); } 84% { -webkit-transform: translate(0, 1.5px) rotate(2.5deg); transform: translate(0, 1.5px) rotate(2.5deg); } 90% { -webkit-transform: translate(0, 2.5px) rotate(-0.5deg); transform: translate(0, 2.5px) rotate(-0.5deg); } 92% { -webkit-transform: translate(0, 0.5px) rotate(-0.5deg); transform: translate(0, 0.5px) rotate(-0.5deg); } 94% { -webkit-transform: translate(0, 2.5px) rotate(0.5deg); transform: translate(0, 2.5px) rotate(0.5deg); } 0%, 100% { -webkit-transform: translate(0, 0) rotate(0); transform: translate(0, 0) rotate(0); } } /* end */
网页头
<script type="text/javascript"> const changeFavicon = link => { let $favicon = document.querySelector('link[rel="icon"]') // If a <link rel="icon"> element already exists, // change its href to the given link. if ($favicon !== null) { $favicon.href = link // Otherwise, create a new element and append it to <head>. } else { $favicon = document.createElement('link') $favicon.rel = 'icon' $favicon.href = link document.head.appendChild($favicon) } } window.onfocus = function() { document.title = 'o(≧∇≦o) 200 OK!' let icon = 'https://acg.blue/wp-content/themes/H-Siren/images/f-logo.png' // 图片地址fonts/favicon.ico changeFavicon(icon) // 动态修改网站图标 } window.onblur = function() { document.title = '(●—●) 404 NOT FOUND' let icon = 'https://acg.blue/wp-content/themes/H-Siren/images/f-logo.png' // 图片地址fonts/favicon.ico changeFavicon(icon) // 动态修改网站图标 } </script>
页面底部显示当前时间以及已经运行时间
mounted() { // 页面加载完后显示当前时间 this.realTime = this.dealWithTime(new Date()) //网站运行的时间 this.show_runtime(new Date()) // 定时刷新时间 let _this = this // 定时器 this.timer = setInterval(function() { _this.realTime = _this.dealWithTime(new Date()) // 修改数据date }, 1000) }, methods: { updateVerifyCode() { this.vcUrl = '/verifyCode?time=' + new Date() }, submitLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.postRequest('/doLogin', this.loginForm).then(resp => { this.loading = false if (resp) { this.$store.commit('INIT_CURRENTHR', resp.obj) window.sessionStorage.setItem('user', JSON.stringify(resp.obj)) let path = this.$route.query.redirect this.$router.replace( path == '/' || path == undefined ? '/home' : path ) } else { this.vcUrl = '/verifyCode?time=' + new Date() } }) } else { return false } }) }, show_runtime(data) { var that = this setTimeout(function() { that.show_runtime() }, 1000) let X = new Date('12/5/2020 16:00:00') let Y = new Date() let T = Y.getTime() - X.getTime() let M = 24 * 60 * 60 * 1000 let a = T / M let A = Math.floor(a) let b = (a - A) * 24 let B = Math.floor(b) let c = (b - B) * 60 let C = Math.floor((b - B) * 60) let D = Math.floor((c - C) * 60) let runtime = A + '天' + B + '小时' + C + '分' + D + '秒' // console.log(runtime) that.runTime = runtime // return runtime }, dealWithTime(data) { let formatDateTime let Y = data.getFullYear() let M = data.getMonth() + 1 let D = data.getDate() let H = data.getHours() let Min = data.getMinutes() let S = data.getSeconds() let W = data.getDay() H = H < 10 ? '0' + H : H Min = Min < 10 ? '0' + Min : Min S = S < 10 ? '0' + S : S switch (W) { case 0: W = '天' break case 1: W = '一' break case 2: W = '二' break case 3: W = '三' break case 4: W = '四' break case 5: W = '五' break case 6: W = '六' break default: break } formatDateTime = Y + '年' + M + '月' + D + '日 ' + H + ':' + Min + ':' + S + ' 星期' + W return formatDateTime } }, // 注意在vue实例销毁前，清除定时器。 destroyed() { if (this.timer) { clearInterval(this.timer) } }
配色
喜欢调整透明度，会有层次感，其次就是过渡色各种颜色，这个是页面感觉有点点少女心哈，因为做的是很老的题目，人力资源管理，不想写的冷冰冰的，喜欢这个按钮的颜色，像糖果，但有的时候自己调颜色一时半会儿找不到想要的，下面推荐几个配颜色的网站，觉得都可以
Fresh Background Gradients | WebGradients.com 💎 准备了180个线性渐变的免费集合
在这里说一下文字渐变色样式，以我的代码为例，按钮渐变就可以直接用了，参考上面链接里面的过渡色可以直接copy css样式
<h3 class="loginTitle" style="font-weight:bolder;
background-image: linear-gradient(to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100%);
-webkit-background-clip:text;color:transparent;" > Welcome Back ! </h3>
Color Hunt - Color Palettes for Designers and Artists
Material Design Colors - Material Palette 可以很方便的选择每种颜色的不同浓度
LOL Colors - Curated color palette inspiration
芝兰紫 - 中国色 - 中国传统颜色 中国传统色，颜色丰富的不行
........................想他
