HTML/CSS|html+css实现漂亮的登录页面

效果展示
代码展示

Document - 锐客网* { margin: 0; padding: 0; box-sizing: border-box; }html, body { height: 100%; }body { overflow-x: hidden; }section { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(94.3deg, rgba(26, 33, 64, 1) 10.9%, rgba(81, 84, 115, 1) 87.1%); overflow: hidden; }section::before { position: absolute; content: ""; z-index: 2; width: 450px; height: 450px; top: 50%; left: 50%; background-color: #FFE53B; transform: translate(-100%, -80%); border-radius: 50%; background-image: linear-gradient(147deg, #FFE53B 0%, #FF2425 74%); box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, .2); animation: pulse 1.5s infinite; }section::after { position: absolute; content: ""; z-index: 2; width: 300px; height: 300px; top: 50%; left: 50%; background-color: #FA8BFF; background-image: linear-gradient(45deg, #FA8BFF, 0%, #2BD2FF 50%, #2BFF88 90%); border-radius: 50%; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, .2); animation: pulse 1.5s infinite; }@keyframes pulse { 0% { box-shadow: 0 0 0 50px rgba(255, 255, 255, .2); }100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }form { position: relative; z-index: 3; width: 300px; background-color: rgba(255, 255, 255, .1); padding: 45px 30px; border-radius: 8px; box-shadow: 0 20px 50px rgba(0, 0, 0, .1); border: 1px solid rgba(255, 255, 255, .2); backdrop-filter: blur(20px); }form p { color: #fff; display: block; text-align: center; margin: 0 0 30px 0; }input { width: 100%; height: 50px; border-radius: 8px; background-color: transparent; border: 1px solid rgba(255, 255, 255, .5); margin-bottom: 15px; padding-left: 15px; color: #fff; outline: none; }input::placeholder { color: #fff; }button { width: 100%; height: 50px; border: 0; background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%); background-size: 200% auto; color: #fff; border-radius: 8px; outline: none; cursor: pointer; box-shadow: 0 20px 40px rgba(0, 0, 0, .1); transition: all ease .4s; }button:hover { background-position: right center; color: #fff; text-decoration: none; }
【HTML/CSS|html+css实现漂亮的登录页面】Preencha seus dados para fazer login

关键性代码说明
//设置渐变色背景 background-image: linear-gradient(to right, #02AAB0 0%, #00CDAC 51%, #02AAB0 100%);

//设置动画 animation: pulse 1.5s infinite; @keyframes pulse { 0% { box-shadow: 0 0 0 50px rgba(255, 255, 255, .2); }100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); } }

//注意与 filter 区别 backdrop-filter: blur(20px); // filter:模糊所有,包括内容 // backdrop-filter:只模糊背景,不包括内容

//设置过度 transition: all ease .4s;

    推荐阅读