青柠起始页样式书写——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="https://cdn.bootcdn.net/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">&copy; 2022</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').value
let 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="https://cdn.bootcdn.net/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'}
}

青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript相关推荐

青柠起始页——一言接口调用
青柠起始页--一言接口调用由于之前写过青柠起始页的样式,当时在访问青柠起始页时,看到了页面推送的"一言",本人表示非常喜欢这个功能,最近刚刚学习了dom,了解了一些对文档进行操作 ...
青柠起始页-浏览器起始页(一个简洁、美观、实用的浏览器起始页。)
青柠起始页以最简洁的设计容纳诸多实用功能. 搜索使用您喜欢的任意搜索引擎,开启网上冲浪之旅. 网站捷径添加您的常用网站,一键快捷访问 , 多种壁纸更换:全平台兼容,即开即用. 官网:https: ...
浏览器主页推荐大全 | Speedceo、青柠起始页、万花筒
由于浏览器主页轻便又好用,越来越多人都在浏览器主页,特别是对那些不能固定使用一台电脑的人来说,浏览器主页简直就是最好的选择,换了一台电脑,只需要打开网址,输入账号就可以立马获取一个和自己使用习惯相关的 ...
青柠起始页时间的获取方式——JavaScript日期对象
青柠起始页时间的获取方式--JavaScript日期对象同JavaScript里的日期对象获取到事件,然后再输入到html里 html  <! ...
有趣的HTML实例（七）注册登录界面Ⅱ（css+js）
你知道,有些鸟儿是注定不会被关在牢笼里的,它们的每一片羽毛都闪耀着自由的光辉. --<肖申克的救赎> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编 ...
有趣的HTML实例（十五）注册登录界面（css+js）
我并不是每次吃完饭就看电视,有时我边吃边看电视,生活中有些改变会增加乐趣. --<加菲猫> 目录一.前言二.往期作品回顾三.作品介绍四.本期代码介绍五.效果显示六.编码实现 i ...
HTML5期末大作业：在线电影网站设计——电影速递网(12页面)含登录注册HTML+CSS+JavaScript
HTML5期末大作业:在线电影网站设计--电影速递网(12页面)含登录注册HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
期末大作业+毕业设计：在线电影网站设计——影视大全(6页面)含登录注册HTML+CSS+JavaScript
1.网页作品简介方面 :HTML期末大作业也可以用做影视类网站的毕业设计 ,主要有:登录.主页.影院.电影.电视剧.推荐等总共 6 个页面 2.网页设计方面:此作品为影视网页设计题材,代码为简单学生 ...
java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...

青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript

青柠起始页样式书写——Html+Css+JavaScript

青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript相关推荐

最新文章

热门文章