56 lines
1.9 KiB
JavaScript
56 lines
1.9 KiB
JavaScript
// src/components/Auth/AuthBackground.js
|
|
import React from "react";
|
|
import { Box } from "@chakra-ui/react";
|
|
|
|
/**
|
|
* 认证页面通用背景组件
|
|
* 用于登录和注册页面的动态渐变背景
|
|
*/
|
|
export default function AuthBackground() {
|
|
return (
|
|
<Box
|
|
position="absolute"
|
|
top={0}
|
|
left={0}
|
|
right={0}
|
|
bottom={0}
|
|
zIndex={0}
|
|
background={`linear-gradient(45deg, rgba(139, 69, 19, 0.9) 0%, rgba(160, 82, 45, 0.8) 15%, rgba(205, 133, 63, 0.7) 30%, rgba(222, 184, 135, 0.8) 45%, rgba(245, 222, 179, 0.6) 60%, rgba(255, 228, 196, 0.7) 75%, rgba(139, 69, 19, 0.8) 100%)`}
|
|
_before={{
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
background: `conic-gradient(from 0deg at 30% 20%, rgba(255, 140, 0, 0.6) 0deg, rgba(255, 69, 0, 0.4) 60deg, rgba(139, 69, 19, 0.5) 120deg, rgba(160, 82, 45, 0.6) 180deg, rgba(205, 133, 63, 0.4) 240deg, rgba(255, 140, 0, 0.5) 300deg, rgba(255, 140, 0, 0.6) 360deg)`,
|
|
mixBlendMode: 'multiply',
|
|
animation: 'fluid-rotate 20s linear infinite'
|
|
}}
|
|
_after={{
|
|
content: '""',
|
|
position: 'absolute',
|
|
top: '10%',
|
|
left: '20%',
|
|
width: '60%',
|
|
height: '80%',
|
|
borderRadius: '50%',
|
|
background: 'radial-gradient(ellipse at center, rgba(255, 165, 0, 0.3) 0%, rgba(255, 140, 0, 0.2) 50%, transparent 70%)',
|
|
filter: 'blur(40px)',
|
|
animation: 'wave-pulse 8s ease-in-out infinite'
|
|
}}
|
|
sx={{
|
|
'@keyframes fluid-rotate': {
|
|
'0%': { transform: 'rotate(0deg) scale(1)' },
|
|
'50%': { transform: 'rotate(180deg) scale(1.1)' },
|
|
'100%': { transform: 'rotate(360deg) scale(1)' }
|
|
},
|
|
'@keyframes wave-pulse': {
|
|
'0%, 100%': { opacity: 0.4, transform: 'scale(1)' },
|
|
'50%': { opacity: 0.8, transform: 'scale(1.2)' }
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|