寫在前面
上次寫過一個登錄頁面受到了許多小伙伴的認(rèn)可，很是開心。點擊跳轉(zhuǎn)第一彈，所以今天時隔許久寫了一個帶有特效的登錄頁面，這是一個簡單版的玻璃特效，主要受到華為手機下載軟件之后軟件上的誘導(dǎo)特效的啟發(fā)，簡單寫了一個，希望大家能喜歡，話不多說~~上代碼。
代碼實現(xiàn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
margin: 0;
}
.container {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-image: url(../pic.jpg);
background-size:contain;
}
.login-form {
width: 240px;
height: 220px;
display: flex;
flex-direction: column;
padding: 40px;
text-align: center;
position: relative;
z-index: 100;
/* background: inherit; */
/*留給大家的小驚喜，把代碼注釋去掉會有不一樣的效果奧*/
border-radius: 18px;
overflow: hidden;
}
.login-form::before {
content: '';
width: calc(100% + 20px);
height: calc(100% + 20px);
box-shadow: inset 0 0 0 200px rgba(255, 255, 255, .5);
position: absolute;
top: -10px;
left: -10px;
z-index: -1;
filter: blur(6px);
overflow: hidden;
}
.login-form h2 {
font-size: 18px;
font-weight: 700;
color: #F8F491;
}
.login-form input,
.login-form button {
text-align: center;
margin: 6px 0;
height: 36px;
border: none;
background-color: rgba(22, 62, 132, .4);
border-radius: 4px;
padding: 0 14px;
color: #F8F491;
}
.login-form button {
margin-top: 24px;
background-color: rgba(22, 62, 132, .3);
color: #F8F491;
position: relative;
overflow: hidden;
cursor: pointer;
transition: .6s;
}
.login-form button:hover {
background-color: rgba(252, 248, 174, 0.52);
color:#fff;
}
.login-form button::before {
content: '';
display: block;
width: 60px;
height: 100%;
background: rgba(255, 255, 255, 0.5);
opacity: 0.5;
position: absolute;
left: 0;
top: 0;
transform: skewX(-45deg);
filter: blur(10px);
overflow: hidden;
transform: translateX(-80px);
}
.login-form button:hover::before {
transition: 1s;
transform: translateX(320px);
opacity: 0.8;
}
.login-form input::placeholder {
text-align: center;
color: #F8F491;
}
</style>
</head>
<body>
<div class="container">
<form action="#" class="login-form">
<h2>LOGIN</h2>
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
實現(xiàn)效果
登錄頁+玻璃特效
學(xué)習(xí)總結(jié)
-
box-shadow 屬性向框添加一個或者多個陰影
box-shadow: h-shadow v-shadow blur spread color inset;值 說明 h-shadow 必需的。水平陰影的位置。允許負(fù)值 v-shadow 必需的。垂直陰影的位置。允許負(fù)值 blur 可選。模糊距離 spread 可選。陰影的大小 color 可選。陰影的顏色 inset 可選。從外層陰影變成內(nèi)層陰影 如果有多個陰影；則用逗號隔開屬性
-
filter 屬性定義了元素的可視效果（例如：模糊與飽和度）
值 說明 blur(px) 給圖像設(shè)置模糊效果,值越大越模糊 brightness(%) 給圖片應(yīng)用一種線性乘法，使其看起來更亮或更暗，100%為原色，大于它則更亮 contrast(%) 設(shè)置圖像的對比度。100%則不變，大于它則運用更低的對比 opacity(%) 轉(zhuǎn)化圖像的透明程度。值定義轉(zhuǎn)換的比例。值為0%則是完全透明，值為100%則圖像無變化 grayscale(%) 將圖像轉(zhuǎn)換為灰度圖像，100%則完全變灰，0%則不變 還有其他屬性我就不一一列出了，大家可自行前往w3c查看。
-
玻璃特效的實現(xiàn)原理其實也很簡單，首先設(shè)定一個按鈕的偽元素，并且設(shè)定不可見，在鼠標(biāo)經(jīng)過的時候，利用CSS3的translate讓它移動，從而就實現(xiàn)了類似有玻璃閃光的效果。
Tip:我的背景圖為了保證原圖不被拉伸，所以做得有些瑕疵，大家可以自行進(jìn)行修改
