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

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

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

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

5ae9ec19df69b64bcf62dfedc792333a.png

今天带大家,用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;

}

fb6e8e9f729a5a0cb83b1ca7394a02e2.gif

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

  • 1
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:1024 设计师:我叫白小胖 返回首页
评论

打赏作者

wx24e331e6d83e1b9f

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值