网站框架怎么做的,廉江新闻最新消息,qq公众号 wordpress,php在wordpress今天为大家收集了几种不同风格的登录页#xff0c;搭配动态渐变背景#xff0c;效果绝对惊艳#xff01; CSS3实现动态渐变玻璃拟态登录页 一、开篇语
纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页#xff0c;搭配动态渐变背景#xff0c;效果绝对惊艳#xff01; …
今天为大家收集了几种不同风格的登录页搭配动态渐变背景效果绝对惊艳 CSS3实现动态渐变玻璃拟态登录页 一、开篇语
纯CSS实现当下最火的玻璃拟态(Morphism)风格登录页搭配动态渐变背景效果绝对惊艳
二、设计特色 ✅ 流动渐变背景 ✅ 毛玻璃视觉效果 ✅ 动态标签动画 ✅ 按钮流光特效
三、关键技术 CSS渐变背景background: linear-gradient() 背景模糊backdrop-filter: blur() 形状动画keyframes控制渐变运动 边框技巧利用mask实现内边框
四、完整代码
!-- 方案二动态渐变 玻璃拟态 --
!DOCTYPE html
html langzh
headmeta charsetUTF-8title登录 - 玻璃拟态版/titlestyle: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
bodydiv classbg-blob/divdiv classbg-blob styleright: -200px; bottom: -200px;/divdiv classlogin-containerh2 stylecolor: white; text-align: center; margin-bottom: 30px;系统登录/h2div classinput-boxinput typetext requiredspan classfloating-label用户名/span/divdiv classinput-boxinput typepassword requiredspan classfloating-label密码/span/divbutton classlogin-btn立即登录/button/div
/body
/html
五、实现要点 使用伪元素创建流动背景 巧用CSS滤镜实现磨砂效果 输入框焦点状态控制 按钮悬停动画实现
六、浏览器兼容性
⚠️ 注意backdrop-filter在Firefox中需要开启实验特性 粒子特效浮动动画 一、技术亮点 粒子动画系统使用particles.js实现可交互的粒子背景 玻璃拟态设计半透明背景模糊效果 动态输入框标签浮动动画 悬停交互卡片悬浮效果
二、完整代码实现
!-- 方案一粒子背景 浮动动画 --
!DOCTYPE html
html langzh
headmeta charsetUTF-8title登录 - 粒子特效版/titlestyle* { 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
bodydiv idparticles-js/divdiv classlogin-boxh2 stylecolor: white; text-align: center; margin-bottom: 30px;欢迎登录/h2div classinput-groupinput typetext requiredlabel用户名/label/divdiv classinput-groupinput typepassword requiredlabel密码/label/divbutton立即登录/button/divscript srchttps://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js/scriptscriptparticlesJS(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 项目一起构建更完善的权限管理体系
