tailwind布局实现酷黑炫酷背景登录表单页面代码-html代码-BFW代码库

tailwind布局实现酷黑炫酷背景登录表单页面代码

代码语言：html

代码描述：tailwind布局实现酷黑炫酷背景登录表单页面代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.16.js"></script>
    <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&display=swap" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    fontFamily: { geist: ['Geist', 'sans-serif'] },
                    animation: {
                        'float': 'float 6s ease-in-out infinite',
                        'login-pulse': 'loginPulse 4s ease-in-out infinite',
                        'field-glow': 'fieldGlow 2s ease-in-out infinite',
                        'button-shine': 'buttonShine 3s ease-in-out infinite',
                    },
                    keyframes: {
                        float: { 
                            '0%, 100%': { transform: 'translateY(0px)' },
                            '50%': { transform: 'translateY(-10px)' }
                        },
                        loginPulse: {
                            '0%, 100%': { transform: 'scale(1)', opacity: 0.8 },
                            '50%': { transform: 'scale(1.02)', opacity: 1 }
                        },
                        fieldGlow: {
                            '0%, 100%': { boxShadow: '0 0 20px rgba(79, 70, 229, 0.3)' },
                            '50%': { boxShadow: '0 0 30px rgba(139, 92, 246, 0.5)' }
                        },
                        buttonShine: {
                            '0%, 100%': { backgroundPosition: '-200% center' },
                            '50%': { backgroundPosition: '200% center' }
                        }
                    }
                }
            }
        }
    </script>
    <style>
        #aurora-canvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
        .glass {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }
        .gradient-border {
            position: relative;
            background: linear-gradient(135deg, rgba(79, 70, 229, 0.1), rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
        }
        .gradient-border::before {
            content: '';
            position: absolute;
            inset: 0;
            padding: 1px;
            background: linear-gradient(135deg, #4f46e5, #3b82f6, #8b5cf6, #f59e0b);
            border-radius: inherit;
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask-composite: xor;
            -webkit-mask-composite: xor;
        }
        .card-border {
            background: rgba(79, 70, 229, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(25px);
            -webkit-backdrop-filter: blur(25px);
            box-shadow: 
                inset 0 0 30px rgba(79, 70, 229, 0.1),
                inset 0 0 60px rgba(59, 130, 246, 0.05),
                0 0 50px rgba(139, 92, 246, 0.2);
        }
        .input-field {
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(79, 70, 229, 0.3);
            backdrop-filter: blur(10px);
            transition: all 0.3s ease;
   .........完整代码请登录后点击上方下载按钮下载查看