今天為大家收集了幾種不同風格的登錄頁，搭配動態漸變背景，效果絕對驚艷！
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 項目，一起構建更完善的權限管理體系！
?
?
?
?
