文章 专栏 网址导航
登录
原创

Jenius生成前端登录页面

发布于 2025-06-05 阅读 69
  • 前端
  • JavaScript
  • CSS
原创

今天想学一些炫酷的前端技术，不过暂时没有好的灵感和思路，那只有向AI请教一番了。
image.png
image.png
点击链接就能打开独立页面展示：
image.png
右键保存网页并查看源码。好家伙，背景颜色渐变，还用了IntersectionObserver，非常纯正的原生js+css，页面配色和交互效果也是可以的。

话不多说，贴上生成的源码

style.css

/*
 * 炫酷登录界面样式表
 * 作者：前端助手
 * 日期：2023-08-01
 * 描述：包含渐变效果、z-index层级控制及视口滚动动画
 */
/* 基础重置与通用样式 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
  min-height: 100vh;
  background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
  background-size: 400% 400%;
  animation: gradientBG 15s ease infinite;
  overflow-x: hidden;
  position: relative;
}
/* 背景渐变动画 */
@keyframes gradientBG {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* 背景装饰元素 */
.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
.gradient-circle {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.7;
  transition: all 1s ease-out;
}
.circle-1 {
  width: 300px;
  height: 300px;
  background: linear-gradient(45deg, #ff00cc, #333399);
  top: 20%;
  left: 10%;
  z-index: 1;
}
.circle-2 {
  width: 400px;
  height: 400px;
  background: linear-gradient(45deg, #00ffcc, #00ccff);
  bottom: 10%;
  right: 15%;
  z-index: 2;
}
.circle-3 {
  width: 250px;
  height: 250px;
  background: linear-gradient(45deg, #ffcc00, #ff0066);
  top: 50%;
  right: 25%;
  z-index: 3;
}
/* 登录容器 - 初始状态（进入视口前） */
.login-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  opacity: 0;
  transform: translateY(100px);
  transition: all 1s ease-out;
  z-index: 10;
}
/* 登录容器 - 进入视口后状态 */
.login-container.visible {
  opacity: 1;
  transform: translateY(0);
}
.card {
  width: 100%;
  max-width: 450px;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 20;
}
.card-header {
  padding: 40px 40px 30px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
}
.card-header h1 {
  color: white;
  font-size: 2.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  letter-spacing: 1px;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.card-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
}
.card-body {
  padding: 30px 40px 40px;
}
/* 表单样式 */
.form-group {
  margin-bottom: 25px;
  position: relative;
}
.form-group label {
  display: block;
  color: white;
  margin-bottom: 8px;
  font-weight: 500;
  font-size: 1rem;
}
.form-group input {
  width: 100%;
  padding: 15px 20px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 1px solid transparent;
}
.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.form-group input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
/* 渐变按钮样式 */
.gradient-btn {
  width: 100%;
  padding: 16px;
  background: linear-gradient(45deg, #ff00cc, #333399);
  border: none;
  border-radius: 10px;
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  z-index: 5;
}
.gradient-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #00ffcc, #00ccff);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.gradient-btn:hover::before {
  opacity: 1;
}
.gradient-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.gradient-btn:active {
  transform: translateY(-1px);
}
/* 底部链接样式 */
.footer-links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}
.footer-links a {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: white;
  text-decoration: underline;
}
/* 加载动画 */
.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.loading.active {
  opacity: 1;
  pointer-events: all;
}
.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  border-top-color: #00ffcc;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .card {
    max-width: 100%;
  }
  .card-header {
    padding: 30px 25px 20px;
  }
  .card-body {
    padding: 25px 25px 30px;
  }
  .circle-1, .circle-2, .circle-3 {
    transform: scale(0.8);
  }
}

@media (max-width: 480px) {
  .footer-links {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }
  .card-header h1 {
    font-size: 1.8rem;
  }
  .form-group input {
    padding: 12px 15px;
  }
  .gradient-btn {
    padding: 14px;
  }
}

app.js

/*
 * 炫酷登录界面交互脚本
 * 作者：前端助手
 * 日期：2023-08-01
 * 描述：实现视口检测动画、表单验证和交互效果
 */

// DOM加载完成后执行
window.addEventListener('DOMContentLoaded', () => {
  // 获取关键元素
  const loginContainer = document.getElementById('loginContainer');
  const loading = document.getElementById('loading');
  const loginForm = document.querySelector('.card-body');
  
  // 初始化IntersectionObserver检测元素是否进入视口
  const initObserver = () => {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          // 元素进入视口时添加可见类
          entry.target.classList.add('visible');
          
          // 背景动画效果
          animateBackground();
        }
      });
    }, {
      threshold: 0.2 // 当20%元素进入视口时触发
    });
    
    // 开始观察登录容器
    observer.observe(loginContainer);
  };
  
  // 背景动画效果
  const animateBackground = () => {
    const circles = document.querySelectorAll('.gradient-circle');
    
    circles.forEach((circle, index) => {
      // 延迟动画效果
      setTimeout(() => {
        circle.style.transform = `scale(${1.1 + index * 0.1})`;
        circle.style.opacity = '0.9';
        
        // 添加鼠标跟随效果
        document.addEventListener('mousemove', (e) => {
          const moveX = (e.clientX - window.innerWidth / 2) * 0.01;
          const moveY = (e.clientY - window.innerHeight / 2) * 0.01;
          
          circle.style.transform = `scale(${1.1 + index * 0.1}) translate(${moveX * (index + 1)}px, ${moveY * (index + 1)}px)`;
        });
      }, 300 * index);
    });
  };
  
  // 表单提交处理
  const handleFormSubmit = (e) => {
    e.preventDefault();
    
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;
    
    // 简单表单验证
    if (!username || !password) {
      shakeForm();
      return;
    }
    
    // 显示加载动画
    loading.classList.add('active');
    
    // 模拟登录请求
    setTimeout(() => {
      loading.classList.remove('active');
      
      // 登录成功效果
      loginContainer.innerHTML = `
        <div class="success">
          <svg viewBox="0 0 24 24" width="80" height="80">
            <path fill="none" stroke="#4CAF50" stroke-width="2" d="M2,12 L9,19 L22,6"></path>
          </svg>
          <h2>登录成功！</h2>
          <p>欢迎回来，${username}</p>
        </div>
      `;
      
      // 添加成功动画
      loginContainer.querySelector('.success').classList.add('animate');
    }, 2000);
  };
  
  // 表单验证失败时的抖动效果
  const shakeForm = () => {
    loginForm.classList.add('shake');
    
    setTimeout(() => {
      loginForm.classList.remove('shake');
    }, 500);
  };
  
  // 初始化应用
  const initApp = () => {
    initObserver();
    loginForm.addEventListener('submit', handleFormSubmit);
    
    // 输入框聚焦时添加效果
    document.querySelectorAll('input').forEach(input => {
      input.addEventListener('focus', () => {
        input.parentElement.classList.add('focused');
      });
      
      input.addEventListener('blur', () => {
        input.parentElement.classList.remove('focused');
      });
    });
  };
  
  // 启动应用
  initApp();
});

index.html(生成的html默认把tailwindcss全带上了，不过我看并没有使用，而且删了也没事，就不放出来了)

<!DOCTYPE html>
<!-- saved from url=(0077)https://mcp.juhe.cn/jenius/statics/app/202506/435469d31bbc4639/?random=888284 -->
<html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="现代化登录界面，包含滚动动画和渐变效果">
  <title>炫酷登录界面</title>
  <link rel="stylesheet" href="./style.css">
<style class="automa-element-selector">@font-face { font-family: "Inter var"; font-weight: 100 900; font-display: swap; font-style: normal; font-named-instance: "Regular"; src: url("chrome-extension://infppggnoaenmfagbfknfkancpbljcca/Inter-roman-latin.var.woff2") format("woff2") }
.automa-element-selector { direction: ltr } 
 [automa-isDragging] { user-select: none } 
 [automa-el-list] {outline: 2px dashed #6366f1;}</style></head>
<body>
  <!-- 背景特效层 -->
  <div class="background">
    <div class="gradient-circle circle-1" style="transform: scale(1.1) translate(5.41px, 1.985px); opacity: 0.9;"></div>
    <div class="gradient-circle circle-2" style="transform: scale(1.2) translate(10.82px, 3.97px); opacity: 0.9;"></div>
    <div class="gradient-circle circle-3" style="transform: scale(1.3) translate(16.23px, 5.955px); opacity: 0.9;"></div>
  </div>
  
  <!-- 登录卡片 -->
  <div class="login-container visible" id="loginContainer">
    <div class="card">
      <div class="card-header">
        <h1>欢迎登录</h1>
        <p>请输入您的账户信息</p>
      </div>
      
      <form class="card-body">
        <div class="form-group">
          <label for="username">用户名</label>
          <input type="text" id="username" placeholder="请输入用户名">
        </div>
        
        <div class="form-group">
          <label for="password">密码</label>
          <input type="password" id="password" placeholder="请输入密码">
        </div>
        
        <button type="submit" class="gradient-btn">登 录</button>
        
        <div class="footer-links">
          <a href="https://mcp.juhe.cn/jenius/statics/app/202506/435469d31bbc4639/?random=888284#">忘记密码?</a>
          <a href="https://mcp.juhe.cn/jenius/statics/app/202506/435469d31bbc4639/?random=888284#">注册账号</a>
        </div>
      </form>
    </div>
  </div>
  
  <!-- 加载动画 -->
  <div class="loading" id="loading">
    <div class="spinner"></div>
  </div>
  
  <script src="./app.js.下载"></script>

<div id="automa-palette">
	<template shadowrootmode="open">
		<style>.list-item-active svg { visibility: visible }</style>
		<div id="app" data-v-app=""><!----></div>
	</template>
</div>
</body>
</html>
本文章不代表SDK.CN立场，如有违规或者侵权，请联系我们及时删除。

评论区

用户_1750403126
0粉丝

励志做一条安静的咸鱼，从此走上人生巅峰。

0

0

4

举报

京ICP备2020037553号-1 北京斯蒂克科技有限公司@版权所有