青柠起始页样式书写——Html+Css+JavaScript
效果展示
清新风格登录界面
首先是制作青柠其实起始页的html
构思一个结构
下面呈现代码
<!-- 作业专用html框架 --><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Lime Start Page</title><link rel="shortcut icon" href="./images/icon.png" type="image/x-icon"><link rel="stylesheet" href="./css/reset.css"><link href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/hello.css"></head>//启动就加载两个函数<body onload="time(),helloFloat()"><div id="app">//设置的背景图片<div id="bg" class="bg"><!-- 图片可替换 --><img id="image" alt=""></div>//设置登录按钮<div id="login"><a href="./login.html">//从图标库引入图标<i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>//主体内容区<main id="main">//问候弹窗<div id="hello" class="hello"></div>//时间显示标签<div class="timecontainer"><div class="time"></div></div>//搜索框的容器<div class="search" id="searchbox">//搜索框 autocomplete="off"设置为off 意为关闭自动填充的下拉选项<input id="search" autocomplete="off" type="text" class="search-input" value="Search">//搜索的放大镜图标 暂未设置<i class="search-icon"></i></div>//聚焦搜索框时，底部弹出的诗句<div id="poem" class="hide"><div class="poemBg"></div><span>「未觉池塘春草梦，阶前梧叶已秋声。」</span><p id="author">—— 偶成</p><button id="poemMenu" type="button"><i class="fa fa-ellipsis-h" aria-hidden="true"></i></button></div></main>//底部的一些信息切换<footer><div class="copy">© </div><div class="info"><ul><li><a href="#" class="Ruoxin">Haoran Chen</a><span>&</span><a href="#" class="Shangzhen">Mei Mu</a><span>|</span><a href="#">about</a></li><li><a href=""></a></li></ul></div></footer>//切换日夜场景按钮<div id="switch"><i id="switchBtn" class="fa fa-sun-o" aria-hidden="true"></i></div></div></body><script src="./js/hello.js"></script></html>
接下来就是构建css代码
#app {position: relative;}body {background-color: black;}.bg {position: fixed;background-size: cover;transition: all .2s;}.bg img {width: 100vw;object-fit: cover;}/* 用户登录 */#login {position: absolute;top: 10px;right: 1%;z-index: 10;font-size: 22px;}#login a {color: rgba(0, 0, 0, .5);}main {position: relative;height: 100vh;}.hello {padding: 0 20px;height: 40px;line-height: 40px;text-align: center;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);color: #ececec;letter-spacing: 1px;border-radius: 20px;/* 背景色 */background-color: rgba(25, 25, 25, .25);box-shadow: rgb(0 0 0 / 20%) 0 0 10px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);animation: fly 7s;}@keyframes fly {0% {top: -40px;}20% {top: 60px}50% {top: 60px;}80% {top: -40px;}}.timecontainer {position: fixed;top: 115px;left: 50%;transform: translateX(-50%);padding: 10px;text-align: center;cursor: pointer;transition: .25s;}.time {font-size: 36px;color: #fff;transition: .25s;text-shadow: 0 0 20px rgb(0 0 0 / 35%);}.timecontainer:hover {animation: timeAni 1s;}@keyframes timeAni {0% {transform: translateX(-50%) scale(1);}70% {transform: translateX(-50%) scale(1.2);}100% {transform: translateX(-50%) scale(1.1);}}footer {position: fixed;bottom: 0;left: 50%;transform: translateX(-50%);}#searchbox {background-color: rgba(0, 0, 0, .35);}#searchbox:hover {background-color: rgba(15, 15, 15, .6);}.search {position: absolute;top: 200px;left: 50%;transform: translateX(-50%);max-width: 80%;width: 230px;height: 43px;border-radius: 30px;color: #fff;background-color: rgba(255, 255, 255, .25);box-shadow: rgb(0 0 0 / 20%) 0 0 10px;-webkit-backdrop-filter: blur(10px);backdrop-filter: blur(10px);overflow: hidden;transition: color .25s, background-color .25s, box-shadow .25s, left .25s, opacity .25s, top .25s, width .25s;}.search:hover {box-shadow: rgb(0 0 0 / 30%) 0 0 10px;width: 530px;}input {outline: 0;border: none;width: 100%;height: 100%;padding: 0 20px;color: inherit;background-color: transparent;font-size: 14px;font-family: "Microsoft Yahei Light", "Microsoft Yahei", "PingFang SC", "Helvetica Neue", Helvetica, Tahoma, Arial, sans-serif;text-align: center;}/* 诗句 */#poem {width: 530px;padding: 15px 50px;margin: 0px;position: absolute;left: 50%;bottom: 125px;transform: translateX(-50%);border-radius: 15px;color: rgba(255, 255, 255, 9);font-size: small;text-align: center;cursor: default;transition: .5s;overflow: hidden;}.hide {opacity: 0;pointer-events: none;}#poem .poemBg {opacity: 0;position: absolute;left: 0;top: 0;z-index: -1;width: 100%;height: 100%;background-color: rgba(0, 0, 0, .1);backdrop-filter: blur(30px);transition: .25s;}#poem span {transition: .25s;text-shadow: 0 0 20px rgb(0 0 0 / 80%);}#poem p {opacity: 0;transition: .25s;margin-top: 8px;}#poem button {opacity: 0;position: absolute;top: 6px;right: 6px;padding: 0 10px;border: none;border-radius: 10px;background-color: transparent;color: rgba(255, 255, 255, .6);cursor: pointer;transition: .25s;}#poem i {font-size: 22px;}/* 诗歌hover部分 */#poem:hover span {text-shadow: 0 0 20px transparent;}#poem:hover .poemBg,#poem:hover p,#poem:hover button {opacity: 1;}#poem:hover button:hover {background-color: rgba(255, 255, 255, .05);color: #70C000;}/* main结束 */footer {display: flex;font-size: 12px;padding: 10px;}.copy {margin-right: 10px;color: rgba(255, 255, 255, .6);}.info li {margin-right: 10px;}.info a,.info span {transition: .3s;color: rgba(255, 255, 255, .6);}.info li a:hover {color: #fff;}#switch {position: fixed;font-size: 50px;bottom: 2%;right: 1%;}#switch .fa:hover {transform: scale(1.1);}#switch .fa {transition: all.3s;color: rgba(255, 207, 72, .75);}
这样初步样式就算成型了
接下来就用JavaScript来设置交互
获取时间的步骤
创建一个时间对象获取小时 根据时区增加时间获取分钟拼接加载到页面中
function time() {var timer = new Date();var hour = timer.getHours();var min = timer.getMinutes();if (hour < 10) {hour = "0" + hour + ":";} else {hour = hour + ":";}if (min < 10) {min = "0" + min + "";} else {min = min + "";}document.querySelector(".time").innerHTML = hour + '' + min;setTimeout(time, 1000);}
紧接着实现弹窗问候语，同时背景也根据时间的变化而产生变化，例如早上 中文 下午 傍晚 夜晚背景图不同，对应氛围
先获取元素获得时间对象创建字符串判断时间输出不同时间的问候语
function helloFloat() {// 获得元素var hello = document.getElementById('hello')var image = document.getElementById('image')// 获得时间对象var gettime = new Date();var hours = gettime.getHours();var str1 = "Good morning! 尊敬的用户！"var str2 = "Good afternoon! 尊敬的用户！"var str3 = "Good night! 尊敬的用户！"// 判断if (hours > 6 && hours <= 11) {hello.innerHTML = str1;image.src = "images/day.png"switchBtn.className = 'fa fa-sun-o'} else if (hours > 11 && hours <= 20) {hello.innerHTML = str2if (hours >= 17) {image.src = "images/afternoon.png"} else {image.src = "images/day.png"}switchBtn.className = 'fa fa-sun-o'} else {hello.innerHTML = str3image.src = "images/night.png"switchBtn.className = 'fa fa-moon-o'switchBtn.style.color = 'rgba(32,33,36,.25)'}}
接下来是输入框的交互
用户聚焦输入框，背景会有两个效果
1、放大2、高斯模糊
同时，底部的诗句美文显现
鼠标移动到诗句时，会显示出处，且背景不完全透明css的hover
// 输入框let search = document.getElementById('search')let bg = document.getElementById('bg')let value = document.getElementById('search').valuelet poem = document.getElementById('poem')// value = "Search"search.onfocus = function () {if (search.value == 'Search') {search.value = ''// 背景高斯模糊bg.style.WebkitFilter = "blur(6px)";// 背景放大bg.style.transform = "scale(1.05)";// 修改诗歌的类名poem.className = 'poem'}}search.onblur = function () {if (search.value == '') {search.value = 'Search'bg.style.WebkitFilter = "blur(0px)";bg.style.transform = "scale(1)";poem.className = 'hide'}}//输入框 结束
单击页面右下角的图标页面的日夜场景切换
切换到夜
// 页面开关灯var switchBtn = document.getElementById('switchBtn');var timer = new Date();var hours = timer.getHours();var flag = true;//默认是 true白天点击黑夜if (hours > 6 && hours <= 20) {flag = false;}switchBtn.onclick = function () {flag = !flag;if (flag) {image.src = "images/night.png"switchBtn.className = 'fa fa-moon-o'switchBtn.style.color = 'rgba(32,33,36,.25)'} else {if (hours > 6 && hours <= 11) {image.src = "images/day.png"} else {if (hours >= 17) {image.src = "images/afternoon.png"} else {image.src = "images/day.png"}}switchBtn.className = 'fa fa-sun-o'switchBtn.style.color = 'rgba(255,207,72,.75)'}}// 页面开关灯 结束
下面是登录界面的制作
login.html
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>login</title><link rel="shortcut icon" href="./images/icon.png" type="image/x-icon"><link href="/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="stylesheet" href="./css/login.css"></head><body><div class="container"><div class="register-box"><h2 class="register-title"><span>没有账号，去</span>注册</h2><div class="input-box"><input type="text" placeholder="用户名"><input id="input" type="password" placeholder="密码"><i class="fa fa-eye-slash fa1" aria-hidden="true"></i><input id="input1" type="password" placeholder="确认密码"><i class="fa fa-eye-slash fa2" aria-hidden="true"></i></div><button>注册</button></div><div class="login-box slide-up"><div class="center"><h2 class="login-title"><span>已有账号，去</span>登录</h2><div class="input-box"><input type="text" placeholder="用户名"><input id="input2" type="password" placeholder="密码"><i class="fa fa-eye-slash fa3" aria-hidden="true"></i></div><button>登录</button></div></div></div><div id="lemon"><a href="./hello.html"><i class="fa fa-lemon-o" aria-hidden="true"></i></a></div></body><script src="./js/login.js"></script></html>
Css
* {margin: 0;padding: 0;}body {min-height: 100vh;/* 弹性布局 居中 */display: flex;justify-content: center;align-items: center;background-color: #94bfb560;}.container {background-color: #222;width: 350px;height: 550px;border-radius: 15px;overflow: hidden;position: relative;}.container::after {content: "";position: absolute;top: 0;left: 0;bottom: 0;right: 0;background: url("../images/bg.jpg") no-repeat;background-size: 500px;background-position: left bottom;opacity: 0.8;}/* 注册区域（登录区域很多样式和注册区域的一样，故而一些统一的样式写在了一起） */.register-box {width: 70%;position: absolute;z-index: 1;top: 50%;left: 50%;transform: translate(-50%, -50%);transition: 0.3s ease;}.register-title,.login-title {color: #fff;font-size: 27px;text-align: center;}.register-title span,.login-title span {color: rgba(0, 0, 0, 0.4);display: none;}.register-box .input-box,.login-box .input-box {background-color: #fff;border-radius: 15px;overflow: hidden;margin-top: 50px;opacity: 1;visibility: visible;transition: 0.6s ease;}.input-box {position: relative;}.input-box .fa {position: absolute;z-index: 100;right: 10px;}.fa1{top: 60px;}.fa2{top: 110px;}.fa3{top: 60px;}.register-box input,.login-box input {width: 100%;height: 30px;border: none;border-bottom: 1px solid rgba(0, 0, 0, 0.1);font-size: 12px;padding: 8px 0;text-indent: 15px;outline: none;}.register-box input:last-child,.login-box input:last-child {border-bottom: none;}.register-box input::placeholder,.login-box input::placeholder {color: rgba(0, 0, 0, 0.4);}.register-box button,.login-box button {width: 100%;padding: 15px 45px;margin: 15px 0;background: rgba(0, 0, 0, 0.4);border: none;border-radius: 15px;color: rgba(255, 255, 255, 0.8);font-size: 13px;font-weight: bold;cursor: pointer;opacity: 1;visibility: visible;transition: 0.3s ease;}.register-box button:hover,.login-box button:hover {background-color: rgba(0, 0, 0, 0.8);}/* 登录区域 */.login-box {position: absolute;inset: 0;top: 20%;z-index: 2;background-color: #fff;transition: 0.3s ease;}.login-box::before {content: "";background-color: #fff;width: 200%;height: 250px;border-radius: 50%;position: absolute;top: -20px;left: 50%;transform: translateX(-50%);}.login-box .center {width: 70%;position: absolute;z-index: 3;left: 50%;top: 40%;transform: translate(-50%, -50%);}.login-title {color: #000;}.login-box .input-box {border: 1px solid rgba(0, 0, 0, 0.1);}.login-box button {background-color: #75a297;}/* 注册、登录区域收起 */.login-box.slide-up {top: 90%;}.login-box.slide-up .center {top: 10%;transform: translate(-50%, 0%);}.login-box.slide-up .login-title,.register-box.slide-up .register-title {font-size: 16px;cursor: pointer;}.login-box.slide-up .login-title span,.register-box.slide-up .register-title span {margin-right: 5px;display: inline-block;}.login-box.slide-up .input-box,.login-box.slide-up .button,.register-box.slide-up .input-box,.register-box.slide-up .button {opacity: 0;visibility: hidden;}.register-box.slide-up {top: 6%;transform: translate(-50%, 0%);}/* 返回青柠起始页 */#lemon{position: fixed;bottom: 0px;right: 0px;font-size: 40px;padding: 20px;transition: all .25s;}#lemon a {color: yellow;}#lemon:hover{transform: scale(1.1);}
js单击切换动效
// 获取要操作的元素let login_title = document.querySelector('.login-title');let register_title = document.querySelector('.register-title');let login_box = document.querySelector('.login-box');let register_box = document.querySelector('.register-box');// 绑定标题点击事件login_title.addEventListener('click', () => {// 判断是否收起，收起才可以点击if (login_box.classList.contains('slide-up')) {register_box.classList.add('slide-up');login_box.classList.remove('slide-up');}})register_title.addEventListener('click', () => {if (register_box.classList.contains('slide-up')) {login_box.classList.add('slide-up');register_box.classList.remove('slide-up');}})
单击小眼睛显示密码
// 输入的密码框let input = document.getElementById('input')let input1 = document.getElementById('input1')let input2 = document.getElementById('input2')var flag = false;eyes.onclick = function () {flag = !flagif (flag) {input.type = 'text';eyes.className = 'fa fa-eye fa1'} else{input.type = 'password';eyes.className = 'fa fa-eye-slash fa1'}}eyes1.onclick = function () {console.log("aaaaa");flag = !flagif (flag) {input1.type = 'text';eyes1.className = 'fa fa-eye fa2'} else{input1.type = 'password';eyes1.className = 'fa fa-eye-slash fa2'}}eyes2.onclick = function () {console.log("aaaaa");flag = !flagif (flag) {input2.type = 'text';eyes2.className = 'fa fa-eye fa3'} else{input2.type = 'password';eyes2.className = 'fa fa-eye-slash fa3'}}
