今天为大家收集了几种不同风格的登录页，搭配动态渐变背景，效果绝对惊艳！
CSS3实现动态渐变+玻璃拟态登录页
一、开篇语
纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页，搭配动态渐变背景，效果绝对惊艳！
二、设计特色
-
✅ 流动渐变背景
-
✅ 毛玻璃视觉效果
-
✅ 动态标签动画
-
✅ 按钮流光特效
三、关键技术
-
CSS渐变背景：
background: linear-gradient() -
背景模糊：
backdrop-filter: blur() -
形状动画：
@keyframes控制渐变运动 -
边框技巧：利用mask实现内边框
四、完整代码
<!-- 方案二：动态渐变 + 玻璃拟态 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>登录 - 玻璃拟态版</title><style>:root {--primary: #7f5af0;--secondary: #2cb67d;}* { margin: 0; padding: 0; box-sizing: border-box; }body {height: 100vh;background: linear-gradient(45deg, #16161a, #242629);display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;}.bg-blob {position: absolute;width: 500px;height: 500px;background: linear-gradient(45deg, var(--primary), var(--secondary));border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;animation: gradientMove 15s infinite;filter: blur(60px);opacity: 0.3;}@keyframes gradientMove {0% { transform: rotate(0deg) scale(1); }50% { transform: rotate(180deg) scale(1.2); }100% { transform: rotate(360deg) scale(1); }}.login-container {position: relative;width: 400px;background: rgba(255,255,255,0.05);padding: 40px;border-radius: 20px;backdrop-filter: blur(10px);border: 1px solid rgba(255,255,255,0.1);box-shadow: 0 25px 45px rgba(0,0,0,0.2);}.input-box {position: relative;margin: 30px 0;}input {width: 100%;padding: 15px 20px;background: rgba(255,255,255,0.1);border: 2px solid transparent;border-radius: 10px;color: white;font-size: 16px;transition: all 0.3s;}input:focus {outline: none;border-color: var(--primary);background: rgba(255,255,255,0.2);}.floating-label {position: absolute;left: 20px;top: 50%;transform: translateY(-50%);color: rgba(255,255,255,0.6);pointer-events: none;transition: all 0.3s;}input:focus ~ .floating-label,input:valid ~ .floating-label {top: -10px;left: 10px;font-size: 12px;color: var(--primary);}.login-btn {width: 100%;padding: 15px;background: linear-gradient(45deg, var(--primary), var(--secondary));border: none;border-radius: 10px;color: white;font-size: 16px;cursor: pointer;transition: all 0.3s;position: relative;overflow: hidden;}.login-btn::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transition: 0.5s;}.login-btn:hover::before {left: 100%;}</style>
</head>
<body><div class="bg-blob"></div><div class="bg-blob" style="right: -200px; bottom: -200px;"></div><div class="login-container"><h2 style="color: white; text-align: center; margin-bottom: 30px;">系统登录</h2><div class="input-box"><input type="text" required><span class="floating-label">用户名</span></div><div class="input-box"><input type="password" required><span class="floating-label">密码</span></div><button class="login-btn">立即登录</button></div>
</body>
</html>五、实现要点
-
使用伪元素创建流动背景
-
巧用CSS滤镜实现磨砂效果
-
输入框焦点状态控制
-
按钮悬停动画实现
六、浏览器兼容性
⚠️ 注意：backdrop-filter在Firefox中需要开启实验特性
粒子特效+浮动动画
一、技术亮点
-
粒子动画系统：使用particles.js实现可交互的粒子背景
-
玻璃拟态设计：半透明背景+模糊效果
-
动态输入框：标签浮动动画
-
悬停交互：卡片悬浮效果
二、完整代码实现
<!-- 方案一：粒子背景 + 浮动动画 -->
<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>登录 - 粒子特效版</title><style>* { margin: 0; padding: 0; box-sizing: border-box; }body {height: 100vh;background: #0a0a2e;display: flex;justify-content: center;align-items: center;overflow: hidden;}#particles-js {position: absolute;width: 100%;height: 100%;}.login-box {position: relative;width: 400px;background: rgba(255, 255, 255, 0.1);padding: 40px;border-radius: 20px;backdrop-filter: blur(10px);box-shadow: 0 15px 35px rgba(0,0,0,0.2);transform: translateY(0);transition: all 0.3s;}.login-box:hover {transform: translateY(-5px);}.input-group {margin: 30px 0;position: relative;}input {width: 100%;padding: 15px;background: rgba(255,255,255,0.1);border: none;border-radius: 8px;color: white;font-size: 16px;transition: all 0.3s;}input:focus {outline: none;background: rgba(255,255,255,0.2);}label {position: absolute;left: 15px;top: 50%;transform: translateY(-50%);color: rgba(255,255,255,0.6);pointer-events: none;transition: all 0.3s;}input:focus ~ label,input:valid ~ label {top: -10px;left: 5px;font-size: 12px;color: #7f5af0;}button {width: 100%;padding: 15px;background: linear-gradient(45deg, #7f5af0, #2cb67d);border: none;border-radius: 8px;color: white;font-size: 16px;cursor: pointer;transition: all 0.3s;}button:hover {transform: scale(1.05);box-shadow: 0 5px 15px rgba(127,90,240,0.4);}</style>
</head>
<body><div id="particles-js"></div><div class="login-box"><h2 style="color: white; text-align: center; margin-bottom: 30px;">欢迎登录</h2><div class="input-group"><input type="text" required><label>用户名</label></div><div class="input-group"><input type="password" required><label>密码</label></div><button>立即登录</button></div><script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script><script>particlesJS('particles-js', {particles: {number: { value: 80 },color: { value: '#7f5af0' },shape: { type: 'circle' },opacity: { value: 0.5 },size: { value: 3 },move: {enable: true,speed: 2,direction: 'none',random: false,straight: false,out_mode: 'out',bounce: false,}},interactivity: {detect_on: 'canvas',events: {onhover: { enable: true, mode: 'repulse' },onclick: { enable: true, mode: 'push' },resize: true}}});</script>
</body>
</html>三、实现步骤
-
引入particles.js库
-
创建canvas容器
-
设计玻璃拟态登录框
-
添加输入框浮动标签动画
-
实现悬停交互效果
更多案例请参考开源项目：https://gitee.com/zunyi-gabe/Creative-Web-Collection.git
欢迎 Star 和 Fork 项目，一起构建更完善的权限管理体系！