10d7c1ee78
This commit revamps the visual design to create a more immersive and opulent 'Ultimate Luxury' theme. It evolves the previous minimalist concept by introducing dynamic 3D effects and enhanced interactivity. Key changes: - Add a mouse-based 3D parallax effect to the main container. - Introduce 3D floating elements and ornaments with complex animations. - Implement a custom cursor with a follower for a unique interactive experience. - Overhaul the color palette, typography, and spacing for a grander aesthetic. - Enhance all hover effects and animations with 3D transforms. - Update the theme-switcher with new, richer color schemes.
1050 lines
34 KiB
HTML
1050 lines
34 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>极致奢华 - 艺术网页设计</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=Playfair+Display:wght@400;700;900&family=Raleway:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--primary: #6e8efb;
|
|
--secondary: #a777e3;
|
|
--accent: #fc466b;
|
|
--dark: #0a0a18;
|
|
--light: #f8fafc;
|
|
--gold: #d4af37;
|
|
--gold-light: #f6e8b1;
|
|
--silver: #c0c0c0;
|
|
--platinum: #e5e4e2;
|
|
--diamond: #b9f2ff;
|
|
--transition: all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1);
|
|
--transition-slow: all 0.8s cubic-bezier(0.215, 0.610, 0.355, 1);
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, var(--dark), #0f0f2d);
|
|
color: var(--light);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
font-family: 'Raleway', sans-serif;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
/* 豪华背景效果 */
|
|
.luxury-bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.luxury-pattern {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image:
|
|
radial-gradient(circle at 20% 30%, rgba(212, 175, 55, 0.05) 2px, transparent 2px),
|
|
radial-gradient(circle at 80% 70%, rgba(212, 175, 55, 0.05) 2px, transparent 2px),
|
|
radial-gradient(circle at 40% 90%, rgba(212, 175, 55, 0.05) 2px, transparent 2px),
|
|
radial-gradient(circle at 60% 10%, rgba(212, 175, 55, 0.05) 2px, transparent 2px);
|
|
background-size: 80px 80px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.gold-line {
|
|
position: absolute;
|
|
background: linear-gradient(90deg, transparent, var(--gold), transparent);
|
|
height: 1px;
|
|
width: 100%;
|
|
}
|
|
|
|
.line-1 {
|
|
top: 20%;
|
|
animation: lineMove 15s infinite linear;
|
|
}
|
|
|
|
.line-2 {
|
|
top: 50%;
|
|
animation: lineMove 12s infinite linear reverse;
|
|
}
|
|
|
|
.line-3 {
|
|
top: 80%;
|
|
animation: lineMove 18s infinite linear;
|
|
}
|
|
|
|
@keyframes lineMove {
|
|
0% { background-position: -1000px 0; }
|
|
100% { background-position: 1000px 0; }
|
|
}
|
|
|
|
/* 3D浮动元素 */
|
|
.floating-element {
|
|
position: absolute;
|
|
border-radius: 20px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
backdrop-filter: blur(5px);
|
|
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
|
animation: float3D 15s infinite ease-in-out;
|
|
transform-style: preserve-3d;
|
|
z-index: -2;
|
|
}
|
|
|
|
.float-1 {
|
|
width: 200px;
|
|
height: 200px;
|
|
top: 10%;
|
|
left: 5%;
|
|
animation-delay: 0s;
|
|
background: linear-gradient(45deg, rgba(110, 142, 251, 0.1), rgba(167, 119, 227, 0.1));
|
|
}
|
|
|
|
.float-2 {
|
|
width: 150px;
|
|
height: 150px;
|
|
bottom: 15%;
|
|
right: 10%;
|
|
animation-delay: -5s;
|
|
background: linear-gradient(45deg, rgba(212, 175, 55, 0.1), rgba(252, 70, 107, 0.1));
|
|
}
|
|
|
|
.float-3 {
|
|
width: 120px;
|
|
height: 120px;
|
|
top: 40%;
|
|
left: 80%;
|
|
animation-delay: -10s;
|
|
background: linear-gradient(45deg, rgba(192, 192, 192, 0.1), rgba(185, 242, 255, 0.1));
|
|
}
|
|
|
|
@keyframes float3D {
|
|
0%, 100% {
|
|
transform: translate3d(0, 0, 0) rotate3d(0.5, 1, 0, 0deg);
|
|
}
|
|
25% {
|
|
transform: translate3d(20px, 30px, 20px) rotate3d(0.5, 1, 0, 90deg);
|
|
}
|
|
50% {
|
|
transform: translate3d(-15px, 15px, 30px) rotate3d(0.5, 1, 0, 180deg);
|
|
}
|
|
75% {
|
|
transform: translate3d(-20px, -10px, 40px) rotate3d(0.5, 1, 0, 270deg);
|
|
}
|
|
}
|
|
|
|
/* 钻石装饰 */
|
|
.diamond {
|
|
position: absolute;
|
|
width: 80px;
|
|
height: 80px;
|
|
background: linear-gradient(135deg, rgba(185, 242, 255, 0.8), rgba(185, 242, 255, 0.2));
|
|
transform: rotate(45deg);
|
|
animation: diamondGlow 4s infinite alternate;
|
|
z-index: -1;
|
|
box-shadow: 0 0 30px rgba(185, 242, 255, 0.5);
|
|
}
|
|
|
|
.diamond::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 60%;
|
|
height: 60%;
|
|
top: 20%;
|
|
left: 20%;
|
|
background: rgba(255,255,255,0.6);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.diamond-1 {
|
|
top: 15%;
|
|
left: 10%;
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.diamond-2 {
|
|
bottom: 20%;
|
|
right: 15%;
|
|
width: 100px;
|
|
height: 100px;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
@keyframes diamondGlow {
|
|
0% { opacity: 0.3; box-shadow: 0 0 20px rgba(185, 242, 255, 0.2); }
|
|
100% { opacity: 0.7; box-shadow: 0 0 60px rgba(185, 242, 255, 0.8); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
width: 100%;
|
|
background: rgba(10, 10, 24, 0.7);
|
|
border-radius: 30px;
|
|
box-shadow:
|
|
0 0 0 1px rgba(255, 255, 255, 0.1),
|
|
0 25px 50px -12px rgba(0, 0, 0, 0.7),
|
|
inset 0 2px 4px rgba(255, 255, 255, 0.05);
|
|
backdrop-filter: blur(25px);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 70px 50px;
|
|
animation: containerAppear 1.5s ease-out;
|
|
position: relative;
|
|
z-index: 1;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes containerAppear {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(50px) rotateX(10deg) scale(0.95);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0) rotateX(0) scale(1);
|
|
}
|
|
}
|
|
|
|
.gold-border {
|
|
position: absolute;
|
|
top: 15px;
|
|
left: 15px;
|
|
right: 15px;
|
|
bottom: 15px;
|
|
border: 2px solid var(--gold);
|
|
border-radius: 20px;
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
box-shadow: 0 0 40px rgba(212, 175, 55, 0.4);
|
|
animation: borderPulse 3s infinite alternate;
|
|
}
|
|
|
|
@keyframes borderPulse {
|
|
0% { opacity: 0.3; box-shadow: 0 0 20px rgba(212, 175, 55, 0.3); }
|
|
100% { opacity: 0.7; box-shadow: 0 0 50px rgba(212, 175, 55, 0.6); }
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Cinzel', serif;
|
|
font-size: 5rem;
|
|
font-weight: 900;
|
|
margin-bottom: 25px;
|
|
background: linear-gradient(to right, var(--gold), var(--gold-light), var(--diamond), var(--gold));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
text-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
|
|
letter-spacing: 3px;
|
|
position: relative;
|
|
display: inline-block;
|
|
transform: translateZ(50px);
|
|
}
|
|
|
|
h1::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 25%;
|
|
width: 50%;
|
|
height: 3px;
|
|
background: linear-gradient(to right, transparent, var(--gold), var(--diamond), var(--gold), transparent);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.8rem;
|
|
color: var(--platinum);
|
|
margin-bottom: 60px;
|
|
font-weight: 300;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
transform: translateZ(30px);
|
|
}
|
|
|
|
.divider {
|
|
height: 2px;
|
|
width: 200px;
|
|
background: linear-gradient(to right, transparent, var(--gold), var(--diamond), var(--gold), transparent);
|
|
margin: 0 auto 60px;
|
|
position: relative;
|
|
transform: translateZ(40px);
|
|
}
|
|
|
|
.divider::before, .divider::after {
|
|
content: '✦';
|
|
position: absolute;
|
|
top: -12px;
|
|
color: var(--gold);
|
|
font-size: 28px;
|
|
text-shadow: 0 0 15px var(--gold);
|
|
}
|
|
|
|
.divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.content-box {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 25px;
|
|
padding: 50px;
|
|
margin: 60px 0;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.content-box::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(212, 175, 55, 0.1), rgba(185, 242, 255, 0.1), transparent);
|
|
transform: translateX(-100%) skewX(-15deg);
|
|
transition: transform 0.8s ease;
|
|
}
|
|
|
|
.content-box:hover::before {
|
|
transform: translateX(100%) skewX(-15deg);
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateY(-10px) rotateX(5deg);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
|
|
}
|
|
|
|
.original-text {
|
|
font-family: 'Playfair Display', serif;
|
|
font-size: 3.5rem;
|
|
font-weight: 700;
|
|
font-style: italic;
|
|
padding: 40px 60px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 20px;
|
|
display: inline-block;
|
|
margin: 40px 0;
|
|
border: 2px solid var(--gold);
|
|
box-shadow: 0 0 40px rgba(212, 175, 55, 0.3);
|
|
position: relative;
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
transform: translateZ(60px);
|
|
}
|
|
|
|
.original-text::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -10px;
|
|
right: -10px;
|
|
bottom: -10px;
|
|
background: linear-gradient(45deg, var(--gold), var(--diamond), var(--gold));
|
|
z-index: -1;
|
|
border-radius: 25px;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.original-text:hover::before {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.original-text:hover {
|
|
transform: scale(1.05) rotate(2deg) translateZ(80px);
|
|
box-shadow: 0 0 60px rgba(212, 175, 55, 0.5);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 2.5rem;
|
|
margin: 0 20px;
|
|
color: var(--gold);
|
|
vertical-align: middle;
|
|
text-shadow: 0 0 10px var(--gold);
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 40px;
|
|
margin: 70px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(255, 255, 255, 0.03);
|
|
padding: 50px 40px;
|
|
border-radius: 25px;
|
|
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
|
|
transition: var(--transition);
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.feature::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 5px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--gold), var(--diamond));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.feature:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-15px) rotateY(5deg);
|
|
background: rgba(255, 255, 255, 0.05);
|
|
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.feature i {
|
|
font-size: 4rem;
|
|
margin-bottom: 30px;
|
|
background: linear-gradient(to right, var(--gold), var(--diamond));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
position: relative;
|
|
filter: drop-shadow(0 5px 15px rgba(0, 0, 0, 0.3));
|
|
}
|
|
|
|
.feature i::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 50px;
|
|
height: 2px;
|
|
background: var(--gold);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 1.8rem;
|
|
margin-bottom: 25px;
|
|
color: var(--light);
|
|
font-family: 'Cinzel', serif;
|
|
letter-spacing: 1px;
|
|
}
|
|
|
|
.feature p {
|
|
color: #ccc;
|
|
font-size: 1.2rem;
|
|
line-height: 1.8;
|
|
}
|
|
|
|
.interactive-section {
|
|
margin: 60px 0;
|
|
padding: 50px;
|
|
background: rgba(255, 255, 255, 0.03);
|
|
border-radius: 25px;
|
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
position: relative;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.interactive-section::before {
|
|
content: '✦ ✦ ✦';
|
|
position: absolute;
|
|
top: -20px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--gold);
|
|
font-size: 28px;
|
|
background: var(--dark);
|
|
padding: 0 30px;
|
|
text-shadow: 0 0 15px var(--gold);
|
|
}
|
|
|
|
.color-palette {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 20px;
|
|
margin: 40px 0;
|
|
}
|
|
|
|
.color-option {
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
border: 3px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
|
|
transform: translateZ(40px);
|
|
}
|
|
|
|
.color-option.active {
|
|
transform: scale(1.15) translateZ(60px);
|
|
border-color: var(--light);
|
|
box-shadow: 0 0 30px rgba(255, 255, 255, 0.6);
|
|
}
|
|
|
|
.color-option::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 2rem;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.color-option.active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-1 { background: linear-gradient(135deg, #0a0a18, #0f0f2d, #1a1a40); }
|
|
.theme-2 { background: linear-gradient(135deg, #2d0f2d, #6a1b6d, #9b4b9b); }
|
|
.theme-3 { background: linear-gradient(135deg, #1a1a40, #2d2d7d, #4a4ab8); }
|
|
.theme-4 { background: linear-gradient(135deg, #1c2833, #566573, #85929e); }
|
|
.theme-5 { background: linear-gradient(135deg, #0d3b66, #1e6fa9, #2e86c1); }
|
|
|
|
footer {
|
|
margin-top: 80px;
|
|
color: var(--silver);
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
position: relative;
|
|
transform: translateZ(30px);
|
|
}
|
|
|
|
footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -40px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 300px;
|
|
height: 2px;
|
|
background: linear-gradient(to right, transparent, var(--gold), var(--diamond), var(--gold), transparent);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 30px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 70px;
|
|
height: 70px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
color: var(--light);
|
|
font-size: 1.8rem;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transform-style: preserve-3d;
|
|
transform: translateZ(40px);
|
|
}
|
|
|
|
.social-links a::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, var(--gold), var(--diamond));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
z-index: -1;
|
|
}
|
|
|
|
.social-links a:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.social-links a:hover {
|
|
transform: translateY(-8px) rotate(10deg) translateZ(60px);
|
|
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
h1 {
|
|
font-size: 4rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 3rem;
|
|
padding: 35px 50px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.5rem;
|
|
padding: 30px 40px;
|
|
}
|
|
|
|
.feature {
|
|
padding: 40px 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 50px 30px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2rem;
|
|
padding: 25px 30px;
|
|
}
|
|
|
|
.features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.color-option {
|
|
width: 60px;
|
|
height: 60px;
|
|
}
|
|
|
|
.social-links a {
|
|
width: 60px;
|
|
height: 60px;
|
|
font-size: 1.5rem;
|
|
}
|
|
}
|
|
|
|
/* 粒子效果 */
|
|
.particles {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
}
|
|
|
|
.particle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.7);
|
|
animation: float-particle 20s infinite linear;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
@keyframes float-particle {
|
|
0% {
|
|
transform: translate3d(0, 0, 0) rotate(0deg);
|
|
opacity: 0;
|
|
}
|
|
10% {
|
|
opacity: 1;
|
|
}
|
|
90% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: translate3d(100px, -100vh, 100px) rotate(360deg);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* 豪华装饰元素 */
|
|
.ornament {
|
|
position: absolute;
|
|
font-size: 50px;
|
|
color: var(--gold);
|
|
opacity: 0.4;
|
|
z-index: -1;
|
|
text-shadow: 0 0 20px var(--gold);
|
|
animation: floatOrnament 10s infinite ease-in-out;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.ornament-1 {
|
|
top: 5%;
|
|
left: 5%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.ornament-2 {
|
|
bottom: 10%;
|
|
right: 8%;
|
|
animation-delay: -3s;
|
|
}
|
|
|
|
.ornament-3 {
|
|
top: 20%;
|
|
right: 15%;
|
|
animation-delay: -6s;
|
|
}
|
|
|
|
@keyframes floatOrnament {
|
|
0%, 100% {
|
|
transform: translate3d(0, 0, 0) rotateY(0deg);
|
|
}
|
|
25% {
|
|
transform: translate3d(10px, 20px, 30px) rotateY(90deg);
|
|
}
|
|
50% {
|
|
transform: translate3d(-15px, 10px, 60px) rotateY(180deg);
|
|
}
|
|
75% {
|
|
transform: translate3d(-10px, -15px, 40px) rotateY(270deg);
|
|
}
|
|
}
|
|
|
|
/* 3D文字效果 */
|
|
.text-3d {
|
|
text-shadow:
|
|
0 1px 0 #ccc,
|
|
0 2px 0 #c9c9c9,
|
|
0 3px 0 #bbb,
|
|
0 4px 0 #b9b9b9,
|
|
0 5px 0 #aaa,
|
|
0 6px 1px rgba(0,0,0,.1),
|
|
0 0 5px rgba(0,0,0,.1),
|
|
0 1px 3px rgba(0,0,0,.3),
|
|
0 3px 5px rgba(0,0,0,.2),
|
|
0 5px 10px rgba(0,0,0,.25),
|
|
0 10px 10px rgba(0,0,0,.2),
|
|
0 20px 20px rgba(0,0,0,.15);
|
|
}
|
|
|
|
/* 光标效果 */
|
|
.custom-cursor {
|
|
position: fixed;
|
|
width: 20px;
|
|
height: 20px;
|
|
border-radius: 50%;
|
|
background: rgba(212, 175, 55, 0.5);
|
|
box-shadow: 0 0 20px var(--gold);
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 9999;
|
|
mix-blend-mode: difference;
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
.cursor-follower {
|
|
position: fixed;
|
|
width: 50px;
|
|
height: 50px;
|
|
border: 2px solid rgba(212, 175, 55, 0.3);
|
|
border-radius: 50%;
|
|
transform: translate(-50%, -50%);
|
|
pointer-events: none;
|
|
z-index: 9998;
|
|
transition: all 0.3s ease;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 自定义光标 -->
|
|
<div class="custom-cursor" id="cursor"></div>
|
|
<div class="cursor-follower" id="cursor-follower"></div>
|
|
|
|
<!-- 豪华背景 -->
|
|
<div class="luxury-bg">
|
|
<div class="luxury-pattern"></div>
|
|
<div class="gold-line line-1"></div>
|
|
<div class="gold-line line-2"></div>
|
|
<div class="gold-line line-3"></div>
|
|
<div class="diamond diamond-1"></div>
|
|
<div class="diamond diamond-2"></div>
|
|
|
|
<!-- 3D浮动元素 -->
|
|
<div class="floating-element float-1"></div>
|
|
<div class="floating-element float-2"></div>
|
|
<div class="floating-element float-3"></div>
|
|
</div>
|
|
|
|
<!-- 粒子背景 -->
|
|
<div class="particles" id="particles"></div>
|
|
|
|
<!-- 装饰元素 -->
|
|
<div class="ornament ornament-1">✦</div>
|
|
<div class="ornament ornament-2">❖</div>
|
|
<div class="ornament ornament-3">♚</div>
|
|
|
|
<div class="container">
|
|
<div class="gold-border"></div>
|
|
|
|
<h1 class="text-3d">极致奢华</h1>
|
|
<p class="subtitle">艺术与科技的完美融合</p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="content-box">
|
|
<p>原始内容被重新赋予艺术生命：</p>
|
|
<div class="original-text">
|
|
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
|
|
</div>
|
|
<p>在极简主义中，空白本身就是一种设计语言</p>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<i class="fas fa-gem"></i>
|
|
<h3>奢华设计</h3>
|
|
<p>采用顶级设计理念，融合金质元素与精致细节，创造非凡视觉体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-crown"></i>
|
|
<h3>尊贵体验</h3>
|
|
<p>每一个交互细节都经过精心设计，提供无与伦比的用户体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-palette"></i>
|
|
<h3>艺术美学</h3>
|
|
<p>将网页设计提升到艺术层面，每一个像素都体现着美学追求</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<h3>选择主题色彩</h3>
|
|
<div class="color-palette">
|
|
<div class="color-option theme-1 active" data-theme="default"></div>
|
|
<div class="color-option theme-2" data-theme="royal"></div>
|
|
<div class="color-option theme-3" data-theme="majestic"></div>
|
|
<div class="color-option theme-4" data-theme="silver"></div>
|
|
<div class="color-option theme-5" data-theme="ocean"></div>
|
|
</div>
|
|
<p>点击上方色块切换页面主题色彩</p>
|
|
</div>
|
|
|
|
<p class="subtitle">少即是多，空即是满，无即是有</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 极致奢华美学 | 设计于当下，着眼于未来</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-pinterest"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 创建粒子背景
|
|
function createParticles() {
|
|
const particlesContainer = document.getElementById('particles');
|
|
const particleCount = 50;
|
|
|
|
for (let i = 0; i < particleCount; i++) {
|
|
const particle = document.createElement('div');
|
|
particle.classList.add('particle');
|
|
|
|
// 随机大小和位置
|
|
const size = Math.random() * 6 + 2;
|
|
const posX = Math.random() * 100;
|
|
const duration = Math.random() * 15 + 20;
|
|
const delay = Math.random() * -20;
|
|
const zDepth = Math.random() * 100;
|
|
|
|
particle.style.width = `${size}px`;
|
|
particle.style.height = `${size}px`;
|
|
particle.style.left = `${posX}%`;
|
|
particle.style.animationDuration = `${duration}s`;
|
|
particle.style.animationDelay = `${delay}s`;
|
|
|
|
// 金色、银色或钻石色粒子
|
|
const colorChoice = Math.random();
|
|
if (colorChoice < 0.4) {
|
|
particle.style.background = 'rgba(212, 175, 55, 0.8)';
|
|
particle.style.boxShadow = '0 0 10px rgba(212, 175, 55, 0.5)';
|
|
} else if (colorChoice < 0.8) {
|
|
particle.style.background = 'rgba(192, 192, 192, 0.8)';
|
|
particle.style.boxShadow = '0 0 10px rgba(192, 192, 192, 0.5)';
|
|
} else {
|
|
particle.style.background = 'rgba(185, 242, 255, 0.8)';
|
|
particle.style.boxShadow = '0 0 10px rgba(185, 242, 255, 0.5)';
|
|
}
|
|
|
|
particlesContainer.appendChild(particle);
|
|
}
|
|
}
|
|
|
|
// 主题切换功能
|
|
function setupThemeToggle() {
|
|
const colorOptions = document.querySelectorAll('.color-option');
|
|
|
|
colorOptions.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// 移除所有active类
|
|
colorOptions.forEach(opt => opt.classList.remove('active'));
|
|
|
|
// 添加active类到当前选项
|
|
this.classList.add('active');
|
|
|
|
// 根据选择切换主题
|
|
const theme = this.getAttribute('data-theme');
|
|
changeTheme(theme);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 切换主题函数
|
|
function changeTheme(theme) {
|
|
const root = document.documentElement;
|
|
|
|
// 根据主题更新CSS变量
|
|
switch(theme) {
|
|
case 'royal':
|
|
root.style.setProperty('--dark', '#2d0f2d');
|
|
root.style.setProperty('--gold', '#9b4b9b');
|
|
root.style.setProperty('--gold-light', '#d6a8d6');
|
|
root.style.setProperty('--diamond', '#f7bef7');
|
|
break;
|
|
case 'majestic':
|
|
root.style.setProperty('--dark', '#1a1a40');
|
|
root.style.setProperty('--gold', '#4a4ab8');
|
|
root.style.setProperty('--gold-light', '#a6a6f6');
|
|
root.style.setProperty('--diamond', '#b9b9ff');
|
|
break;
|
|
case 'silver':
|
|
root.style.setProperty('--dark', '#1c2833');
|
|
root.style.setProperty('--gold', '#85929e');
|
|
root.style.setProperty('--gold-light', '#d0d3d4');
|
|
root.style.setProperty('--diamond', '#f4f6f7');
|
|
break;
|
|
case 'ocean':
|
|
root.style.setProperty('--dark', '#0d3b66');
|
|
root.style.setProperty('--gold', '#2e86c1');
|
|
root.style.setProperty('--gold-light', '#aed6f1');
|
|
root.style.setProperty('--diamond', '#d6eaf8');
|
|
break;
|
|
default:
|
|
root.style.setProperty('--dark', '#0a0a18');
|
|
root.style.setProperty('--gold', '#d4af37');
|
|
root.style.setProperty('--gold-light', '#f6e8b1');
|
|
root.style.setProperty('--diamond', '#b9f2ff');
|
|
}
|
|
}
|
|
|
|
// 自定义光标
|
|
function setupCustomCursor() {
|
|
const cursor = document.getElementById('cursor');
|
|
const cursorFollower = document.getElementById('cursor-follower');
|
|
|
|
document.addEventListener('mousemove', function(e) {
|
|
cursor.style.left = e.clientX + 'px';
|
|
cursor.style.top = e.clientY + 'px';
|
|
|
|
setTimeout(() => {
|
|
cursorFollower.style.left = e.clientX + 'px';
|
|
cursorFollower.style.top = e.clientY + 'px';
|
|
}, 100);
|
|
});
|
|
|
|
// 为可点击元素添加光标效果
|
|
const clickableElements = document.querySelectorAll('a, button, .color-option, .original-text');
|
|
|
|
clickableElements.forEach(element => {
|
|
element.addEventListener('mouseenter', () => {
|
|
cursor.style.transform = 'translate(-50%, -50%) scale(1.5)';
|
|
cursorFollower.style.transform = 'translate(-50%, -50%) scale(1.5)';
|
|
cursorFollower.style.borderColor = 'rgba(212, 175, 55, 0.5)';
|
|
});
|
|
|
|
element.addEventListener('mouseleave', () => {
|
|
cursor.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
cursorFollower.style.transform = 'translate(-50%, -50%) scale(1)';
|
|
cursorFollower.style.borderColor = 'rgba(212, 175, 55, 0.3)';
|
|
});
|
|
});
|
|
}
|
|
|
|
// 3D视差效果
|
|
function setupParallax() {
|
|
const container = document.querySelector('.container');
|
|
|
|
document.addEventListener('mousemove', (e) => {
|
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
|
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
|
|
|
|
container.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
|
|
});
|
|
|
|
// 重置动画当鼠标离开窗口
|
|
document.addEventListener('mouseleave', () => {
|
|
container.style.transform = 'rotateY(0deg) rotateX(0deg)';
|
|
});
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createParticles();
|
|
setupThemeToggle();
|
|
setupCustomCursor();
|
|
setupParallax();
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'scale(1.1) rotate(5deg) translateZ(100px)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1) rotate(0deg) translateZ(60px)';
|
|
}, 500);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |