java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743

作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。

微信公众号：AlbertYang关注我更多精彩等你来发现！

今天带大家，用html+css实现一个漂亮的登录页面，代码中关键部分我都做了注释，具体实现过程请看下面的视频和代码。

视频

html+css实现漂亮的透明登录页面，HTML炫酷登录页面

视频录的比较急，视频的最后背景圆样式那里少加了一个border-radius: 50%;，导致没有变成圆形，而是正方形，在下面的代码中已更正。

HTML

登录:微信公众号AlbertYang

登录

忘记密码?

点击这里

没有账户?

注册

CSS

/* 清除浏览器默认边距，

使边框和内边距的值包含在元素的width和height内 */

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

/* 使用flex布局，让内容垂直和水平居中 */

section {

/* 相对定位 */

position: relative;

overflow: hidden;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */

background: linear-gradient(to bottom, #f1f4f9, #dff1ff);

}

/* 背景颜色 */

section .color {

/* 绝对定位 */

position: absolute;

/* 使用filter(滤镜) 属性，给图像设置高斯模糊*/

filter: blur(200px);

}

/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */

section .color:nth-child(1) {

top: -350px;

width: 600px;

height: 600px;

background: #ff359b;

}

section .color:nth-child(2) {

bottom: -150px;

left: 100px;

width: 500px;

height: 500px;

background: #fffd87;

}

section .color:nth-child(3) {

bottom: 50px;

right: 100px;

width: 500px;

height: 500px;

background: #00d2ff;

}

.box {

position: relative;

}

/* 背景圆样式 */

.box .circle {

position: absolute;

background: rgba(255, 255, 255, 0.1);

/* backdrop-filter属性为一个元素后面区域添加模糊效果 */

backdrop-filter: blur(5px);

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

border: 1px solid rgba(255, 255, 255, 0.5);

border-right: 1px solid rgba(255, 255, 255, 0.2);

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

border-radius: 50%;

/* 使用filter(滤镜) 属性，改变颜色。

hue-rotate(deg) 给图像应用色相旋转

calc() 函数用于动态计算长度值

var() 函数调用自定义的CSS属性值x*/

filter: hue-rotate(calc(var(--x) * 70deg));

/* 调用动画animate，需要10s完成动画，

linear表示动画从头到尾的速度是相同的，

infinite指定动画应该循环播放无限次*/

animation: animate 10s linear infinite;

/* 动态计算动画延迟几秒播放 */

animation-delay: calc(var(--x) * -1s);

}

/* 背景圆动画 */

@keyframes animate {

0%, 100%, {

transform: translateY(-50px);

}

50% {

transform: translateY(50px);

}

}

.box .circle:nth-child(1) {

top: -50px;

right: -60px;

width: 100px;

height: 100px;

}

.box .circle:nth-child(2) {

top: 150px;

left: -100px;

width: 120px;

height: 120px;

z-index: 2;

}

.box .circle:nth-child(3) {

bottom: 50px;

right: -60px;

width: 80px;

height: 80px;

z-index: 2;

}

.box .circle:nth-child(4) {

bottom: -80px;

left: 100px;

width: 60px;

height: 60px;

}

.box .circle:nth-child(5) {

top: -80px;

left: 140px;

width: 60px;

height: 60px;

}

/* 登录框样式 */

.container {

position: relative;

width: 400px;

min-height: 400px;

background: rgba(255, 255, 255, 0.1);

display: flex;

justify-content: center;

align-items: center;

backdrop-filter: blur(5px);

box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);

border: 1px solid rgba(255, 255, 255, 0.5);

border-right: 1px solid rgba(255, 255, 255, 0.2);

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

}

.form {

position: relative;

width: 100%;

height: 100%;

padding: 50px;

}

/* 登录标题样式 */

.form h2 {

position: relative;

color: #fff;

font-size: 24px;

font-weight: 600;

letter-spacing: 5px;

margin-bottom: 30px;

cursor: pointer;

}

/* 登录标题的下划线样式 */

.form h2::before {

content: "";

position: absolute;

left: 0;

bottom: -10px;

width: 0px;

height: 3px;

background: #fff;

transition: 0.5s;

}

.form h2:hover:before {

width: 53px;

}

.form .inputBox {

width: 100%;

margin-top: 20px;

}

/* 输入框样式 */

.form .inputBox input {

width: 100%;

padding: 10px 20px;

background: rgba(255, 255, 255, 0.2);

outline: none;

border: none;

border-radius: 30px;

border: 1px solid rgba(255, 255, 255, 0.5);

border-right: 1px solid rgba(255, 255, 255, 0.2);

border-bottom: 1px solid rgba(255, 255, 255, 0.2);

font-size: 16px;

letter-spacing: 1px;

color: #fff;

box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);

}

.form .inputBox input::placeholder {

color: #fff;

}

/* 登录按钮样式 */

.form .inputBox input[type="submit"] {

background: #fff;

color: #666;

max-width: 100px;

margin-bottom: 20px;

font-weight: 600;

cursor: pointer;

}

.forget {

margin-top: 6px;

color: #fff;

letter-spacing: 1px;

}

.forget a {

color: #fff;

font-weight: 600;

text-decoration: none;

}

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！