html/css高科技登录

Dvlo
96 阅读18分钟

介绍

  • 深色背景搭配霓虹蓝色

  • 动态粒子动画背景

  • 输入框聚焦动画效果

  • 科技感字体和图标

  • 悬浮按钮效果

HTML

  1. <!DOCTYPE html>  
  2. <html lang="zh-CN">  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  6.     <title>高科技登录</title>  
  7.     <style>  
  8.         * {  
  9.             margin: 0;  
  10.             padding: 0;  
  11.             box-sizing: border-box;  
  12.             font-family: 'Segoe UI', 'Roboto', sans-serif;  
  13.         }  
  14.           
  15.         body {  
  16.             display: flex;  
  17.             justify-content: center;  
  18.             align-items: center;  
  19.             min-height: 100vh;  
  20.             background: #0a0e21;  
  21.             overflow: hidden;  
  22.         }  
  23.           
  24.         #particles-js {  
  25.             position: absolute;  
  26.             width: 100%;  
  27.             height: 100%;  
  28.             z-index: 1;  
  29.         }  
  30.           
  31.         .container {  
  32.             position: relative;  
  33.             z-index: 2;  
  34.             width: 380px;  
  35.             padding: 40px;  
  36.             background: rgba(13, 18, 39, 0.8);  
  37.             backdrop-filter: blur(10px);  
  38.             border-radius: 10px;  
  39.             box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);  
  40.             border: 1px solid rgba(255, 255, 255, 0.1);  
  41.         }  
  42.           
  43.         .container::before {  
  44.             content: '';  
  45.             position: absolute;  
  46.             top: -2px;  
  47.             left: -2px;  
  48.             right: -2px;  
  49.             bottom: -2px;  
  50.             z-index: -1;  
  51.             background: linear-gradient(45deg, #ff005e, #ffeb3b, #00bcd4, #4caf50);  
  52.             background-size: 400%;  
  53.             border-radius: 10px;  
  54.             animation: glow 20s linear infinite;  
  55.             filter: blur(10px);  
  56.             opacity: 0.5;  
  57.         }  
  58.           
  59.         @keyframes glow {  
  60.             0% { background-position: 0 0; }  
  61.             50% { background-position: 400% 0; }  
  62.             100% { background-position: 0 0; }  
  63.         }  
  64.           
  65.         .login-box {  
  66.             display: flex;  
  67.             flex-direction: column;  
  68.             align-items: center;  
  69.         }  
  70.           
  71.         h2 {  
  72.             color: #00e0ff;  
  73.             font-size: 2em;  
  74.             letter-spacing: 2px;  
  75.             margin-bottom: 40px;  
  76.             text-transform: uppercase;  
  77.             text-shadow: 0 0 10px #00e0ff;  
  78.         }  
  79.           
  80.         .input-box {  
  81.             position: relative;  
  82.             width: 100%;  
  83.             margin-bottom: 30px;  
  84.         }  
  85.           
  86.         .input-box input {  
  87.             width: 100%;  
  88.             padding: 15px 20px;  
  89.             background: transparent;  
  90.             border: none;  
  91.             outline: none;  
  92.             border-radius: 5px;  
  93.             color: #fff;  
  94.             font-size: 1em;  
  95.             border: 1px solid rgba(255, 255, 255, 0.1);  
  96.             transition: all 0.3s;  
  97.         }  
  98.           
  99.         .input-box input:focus {  
  100.             border-color: #00e0ff;  
  101.             box-shadow: 0 0 15px rgba(0, 224, 255, 0.5);  
  102.         }  
  103.           
  104.         .input-box label {  
  105.             position: absolute;  
  106.             top: 15px;  
  107.             left: 20px;  
  108.             pointer-events: none;  
  109.             color: rgba(255, 255, 255, 0.5);  
  110.             transition: 0.3s;  
  111.         }  
  112.           
  113.         .input-box input:focus ~ label,  
  114.         .input-box input:valid ~ label {  
  115.             top: -12px;  
  116.             left: 10px;  
  117.             font-size: 0.8em;  
  118.             background: #0a0e21;  
  119.             padding: 0 10px;  
  120.             color: #00e0ff;  
  121.         }  
  122.           
  123.         .icon {  
  124.             position: absolute;  
  125.             top: 15px;  
  126.             right: 20px;  
  127.             color: rgba(255, 255, 255, 0.5);  
  128.             transition: 0.3s;  
  129.         }  
  130.           
  131.         .input-box input:focus ~ .icon {  
  132.             color: #00e0ff;  
  133.         }  
  134.           
  135.         .options {  
  136.             width: 100%;  
  137.             display: flex;  
  138.             justify-content: space-between;  
  139.             margin-bottom: 30px;  
  140.             font-size: 0.9em;  
  141.         }  
  142.           
  143.         .remember {  
  144.             display: flex;  
  145.             align-items: center;  
  146.             color: rgba(255, 255, 255, 0.7);  
  147.         }  
  148.           
  149.         .remember input {  
  150.             margin-right: 5px;  
  151.             accent-color: #00e0ff;  
  152.         }  
  153.           
  154.         .forgot {  
  155.             color: #00e0ff;  
  156.             text-decoration: none;  
  157.             transition: 0.3s;  
  158.         }  
  159.           
  160.         .forgot:hover {  
  161.             text-shadow: 0 0 5px #00e0ff;  
  162.         }  
  163.           
  164.         button {  
  165.             width: 100%;  
  166.             padding: 15px;  
  167.             background: linear-gradient(45deg, #00bcd4, #0072ff);  
  168.             border: none;  
  169.             border-radius: 5px;  
  170.             color: #fff;  
  171.             font-size: 1.1em;  
  172.             letter-spacing: 1px;  
  173.             cursor: pointer;  
  174.             transition: 0.3s;  
  175.             box-shadow: 0 5px 15px rgba(0, 114, 255, 0.3);  
  176.         }  
  177.           
  178.         button:hover {  
  179.             background: linear-gradient(45deg, #0072ff, #00bcd4);  
  180.             box-shadow: 0 5px 20px rgba(0, 114, 255, 0.5);  
  181.             transform: translateY(-2px);  
  182.         }  
  183.           
  184.         .signup {  
  185.             margin-top: 25px;  
  186.             color: rgba(255, 255, 255, 0.7);  
  187.             font-size: 0.9em;  
  188.             text-align: center;  
  189.         }  
  190.           
  191.         .signup a {  
  192.             color: #00e0ff;  
  193.             text-decoration: none;  
  194.             transition: 0.3s;  
  195.         }  
  196.           
  197.         .signup a:hover {  
  198.             text-shadow: 0 0 5px #00e0ff;  
  199.         }  
  200.           
  201.         .scan-effect {  
  202.             position: absolute;  
  203.             top: 0;  
  204.             left: 0;  
  205.             width: 100%;  
  206.             height: 3px;  
  207.             background: linear-gradient(90deg, transparent, #00e0ff, transparent);  
  208.             animation: scan 2s linear infinite;  
  209.             opacity: 0.7;  
  210.         }  
  211.           
  212.         @keyframes scan {  
  213.             0% { top: 0; }  
  214.             100% { top: 100%; }  
  215.         }  
  216.     </style>  
  217. </head>  
  218. <body>  
  219.     <div id="particles-js"></div>  
  220.       
  221.     <div class="container">  
  222.         <div class="scan-effect"></div>  
  223.         <div class="login-box">  
  224.             <h2>安全登录</h2>  
  225.               
  226.             <div class="input-box">  
  227.                 <input type="text" required>  
  228.                 <label>用户名 / 邮箱</label>  
  229.   
  230.             </div>  
  231.               
  232.             <div class="input-box">  
  233.                 <input type="password" required>  
  234.                 <label>密码</label>  
  235.   
  236.             </div>  
  237.               
  238.             <div class="options">  
  239.                 <label class="remember">  
  240.                     <input type="checkbox"> 记住我  
  241.                 </label>  
  242.                 <a href="#" class="forgot">忘记密码?</a>  
  243.             </div>  
  244.               
  245.             <button>登录系统</button>  
  246.               
  247.             <div class="signup">  
  248.                 没有账户? <a href="#">注册新账户</a>  
  249.             </div>  
  250.         </div>  
  251.     </div>  
  252.   
  253.     <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>  
  254.     <script>  
  255.         // 粒子背景初始化  
  256.         particlesJS('particles-js', {  
  257.             particles: {  
  258.                 number: { value: 80, density: { enable: true, value_area: 800 } },  
  259.                 color: { value: "#00e0ff" },  
  260.                 shape: { type: "circle" },  
  261.                 opacity: { value: 0.5, random: true },  
  262.                 size: { value: 3, random: true },  
  263.                 line_linked: {  
  264.                     enable: true,  
  265.                     distance: 150,  
  266.                     color: "#00e0ff",  
  267.                     opacity: 0.4,  
  268.                     width: 1  
  269.                 },  
  270.                 move: {  
  271.                     enable: true,  
  272.                     speed: 2,  
  273.                     direction: "none",  
  274.                     random: true,  
  275.                     straight: false,  
  276.                     out_mode: "out",  
  277.                     bounce: false  
  278.                 }  
  279.             },  
  280.             interactivity: {  
  281.                 detect_on: "canvas",  
  282.                 events: {  
  283.                     onhover: { enable: true, mode: "grab" },  
  284.                     onclick: { enable: true, mode: "push" },  
  285.                     resize: true  
  286.                 }  
  287.             },  
  288.             retina_detect: true  
  289.         });  
  290.           
  291.         // 输入框效果  
  292.         const inputs = document.querySelectorAll('input');  
  293.         inputs.forEach(input => {  
  294.             input.addEventListener('focus', () => {  
  295.                 input.parentElement.classList.add('focused');  
  296.             });  
  297.             input.addEventListener('blur', () => {  
  298.                 if (input.value === '') {  
  299.                     input.parentElement.classList.remove('focused');  
  300.                 }  
  301.             });  
  302.         });  
  303.     </script>  
  304. </body>  
  305. </html>  
avatar
文章
阅读
粉丝