當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發(fā)布時間：2023/12/8 javascript 30 豆豆

生活随笔收集整理的這篇文章主要介紹了青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

青檸起始頁樣式書寫——Html+Css+JavaScript

效果展示

清新風格登錄界面

首先是制作青檸其實起始頁的html

構(gòu)思一個結(jié)構(gòu)

下面呈現(xiàn)代碼

<!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> //啟動就加載兩個函數(shù) <body onload="time(),helloFloat()"><div id="app">//設(shè)置的背景圖片<div id="bg" class="bg"><img id="image" alt=""></div>//設(shè)置登錄按鈕<div id="login"><a href="./login.html">//從圖標庫引入圖標<i class="fa fa-user-circle-o" aria-hidden="true"></i></a></div>//主體內(nèi)容區(qū)<main id="main">//問候彈窗<div id="hello" class="hello"></div>//時間顯示標簽<div class="timecontainer"><div class="time"></div></div>//搜索框的容器<div class="search" id="searchbox">//搜索框 autocomplete="off"設(shè)置為off 意為關(guān)閉自動填充的下拉選項<input id="search" autocomplete="off" type="text" class="search-input" value="Search">//搜索的放大鏡圖標暫未設(shè)置<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">© 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>

接下來就是構(gòu)建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結(jié)束 */ 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來設(shè)置交互

獲取時間的步驟

創(chuàng)建一個時間對象獲取小時根據(jù)時區(qū)增加時間獲取分鐘拼接加載到頁面中 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); }

緊接著實現(xiàn)彈窗問候語，同時背景也根據(jù)時間的變化而產(chǎn)生變化，例如早上中文下午傍晚夜晚 背景圖不同，對應(yīng)氛圍

先獲取元素獲得時間對象創(chuàng)建字符串判斷時間輸出不同時間的問候語 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、高斯模糊

同時，底部的詩句美文顯現(xiàn)

鼠標移動到詩句時，會顯示出處，且背景不完全透明 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'} } //輸入框結(jié)束

單擊頁面右下角的圖標頁面的日夜場景切換

切換到夜

// 頁面開關(guān)燈 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)'} } // 頁面開關(guān)燈結(jié)束

下面是登錄界面的制作

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; }/* 注冊區(qū)域（登錄區(qū)域很多樣式和注冊區(qū)域的一樣，故而一些統(tǒng)一的樣式寫在了一起） */ .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); }/* 登錄區(qū)域 */ .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; }/* 注冊、登錄區(qū)域收起 */ .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'} }

總結(jié)

以上是生活随笔為你收集整理的青柠起始页样式书写+清新风格登录界面——Html+Css+JavaScript的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python 效率算法_python
下一篇： Spring面试题（2022最新版）