大家觉得怎么样
提示词就是让他去写一个HTML，没有任何多余的要求
<!DOCTYPE html>
<html lang="zh-CN" class="dark scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AETHER | Digital Essence</title>
<!-- 引入 Tailwind CSS -->
<script src="https://cdn.tailwindcss.com"></script>
<!-- 引入 Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Syne:wght@400;700;800&display=swap" rel="stylesheet">
<!-- 配置 Tailwind 主题 -->
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: {
sans: ['Space Grotesk', 'sans-serif'],
display: ['Syne', 'sans-serif'],
},
colors: {
void: '#050505',
neon: {
purple: '#b026ff',
blue: '#00f3ff',
pink: '#ff0099'
}
},
animation: {
'spin-slow': 'spin 12s linear infinite',
'float': 'float 6s ease-in-out infinite',
},
keyframes: {
float: {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-20px)' },
}
}
}
}
}
</script>
<style>
/* 全局基础样式 */
body {
background-color: #050505;
color: #ffffff;
overflow-x: hidden;
cursor: none; /* 隐藏默认鼠标，使用自定义光标 */
}
/* 自定义滚动条 */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #050505;
}
::-webkit-scrollbar-thumb {
background: #333;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* 自定义光标样式 */
.cursor-dot,
.cursor-outline {
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
border-radius: 50%;
z-index: 9999;
pointer-events: none;
}
.cursor-dot {
width: 8px;
height: 8px;
background-color: white;
}
.cursor-outline {
width: 40px;
height: 40px;
border: 1px solid rgba(255, 255, 255, 0.5);
transition: width 0.2s, height 0.2s, background-color 0.2s;
}
/* 玻璃拟态增强 */
.glass-panel {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.08);
}
/* 文字填充渐变 */
.text-gradient {
background: linear-gradient(135deg, #fff 0%, #a5a5a5 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.text-gradient-color {
background: linear-gradient(to right, #00f3ff, #b026ff, #ff0099);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-size: 200% auto;
animation: shine 5s linear infinite;
}
@keyframes shine {
to {
background-position: 200% center;
}
}
/* Canvas 层叠 */
#fluid-canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
opacity: 0.6;
pointer-events: none;
}
/* 图片悬停特效 */
.image-reveal {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
/* 3D Tilt 容器 */
.tilt-card {
transform-style: preserve-3d;
transform: perspective(1000px);
}
</style>
</head>
<body class="antialiased selection:bg-neon-purple selection:text-white">
<!-- 自定义光标元素 -->
<div class="cursor-dot hidden md:block"></div>
<div class="cursor-outline hidden md:block"></div>
<!-- 背景 Canvas -->
<canvas id="fluid-canvas"></canvas>
<!-- 导航栏 -->
<nav class="fixed top-0 w-full z-50 px-6 py-6 mix-blend-difference text-white">
<div class="max-w-7xl mx-auto flex justify-between items-center">
<a href="#" class="text-2xl font-display font-bold tracking-tighter hover:opacity-70 transition-opacity">AETHER.</a>
<div class="hidden md:flex space-x-8 text-sm font-medium tracking-widest uppercase">
<a href="#vision" class="hover:text-neon-blue transition-colors">Vision</a>
<a href="#work" class="hover:text-neon-blue transition-colors">Work</a>
<a href="#philosophy" class="hover:text-neon-blue transition-colors">Philosophy</a>
</div>
<button class="px-6 py-2 border border-white/20 rounded-full hover:bg-white hover:text-black transition-all duration-300 text-sm">
Let's Talk
</button>
</div>
</nav>
<!-- 主要内容 -->
<main class="relative z-10">
<!-- 英雄区域 (Hero Section) -->
<section class="min-h-screen flex flex-col justify-center items-center relative px-4">
<div class="text-center max-w-5xl mx-auto space-y-8">
<p class="text-neon-blue tracking-[0.3em] text-sm uppercase opacity-0 animate-slide-up" style="animation-delay: 0.2s; animation-fill-mode: forwards;">
Digital Experience Agency
</p>
<h1 class="text-6xl md:text-9xl font-display font-bold leading-none tracking-tighter">
<span class="block overflow-hidden"><span class="block transform translate-y-full animate-reveal">We Craft</span></span>
<span class="block overflow-hidden"><span class="block transform translate-y-full animate-reveal text-gradient-color" style="animation-delay: 0.2s">Digital</span></span>
<span class="block overflow-hidden"><span class="block transform translate-y-full animate-reveal" style="animation-delay: 0.4s">Realities</span></span>
</h1>
<p class="text-gray-400 max-w-lg mx-auto text-lg font-light leading-relaxed opacity-0 animate-slide-up" style="animation-delay: 0.8s; animation-fill-mode: forwards;">
Merging the boundaries between art and technology. We build immersive interfaces that feel like magic.
</p>
</div>
<!-- 滚动提示 -->
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 flex flex-col items-center gap-2 opacity-50 animate-bounce">
<span class="text-[10px] tracking-widest uppercase">Scroll</span>
<div class="w-[1px] h-12 bg-gradient-to-b from-white to-transparent"></div>
</div>
</section>
<!-- 视觉大片 (Vision Section) -->
<section id="vision" class="py-32 px-6 relative overflow-hidden">
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-16 items-center">
<div class="relative group parallax-container">
<div class="absolute -inset-4 bg-gradient-to-r from-neon-purple to-neon-blue opacity-20 blur-2xl group-hover:opacity-40 transition-opacity duration-500"></div>
<div class="relative tilt-card aspect-[4/5] rounded-lg overflow-hidden">
<img src="https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop" alt="Abstract Art" class="object-cover w-full h-full transform transition-transform duration-700 group-hover:scale-110">
<div class="absolute inset-0 bg-black/20 group-hover:bg-transparent transition-colors duration-500"></div>
</div>
</div>
<div class="space-y-8 parallax-text">
<h2 class="text-4xl md:text-6xl font-display font-bold leading-tight">
Form follows <br>
<span class="text-transparent bg-clip-text bg-gradient-to-r from-white to-gray-500">Function.</span>
</h2>
<p class="text-gray-400 text-lg leading-relaxed max-w-md">
In the void of the digital canvas, we find structure. Every pixel serves a purpose, every animation tells a story. We don't just build websites; we engineer emotions.
</p>
<div class="flex items-center gap-4">
<div class="h-[1px] w-12 bg-white"></div>
<span class="uppercase text-xs tracking-widest text-gray-500">Est. 2024</span>
</div>
</div>
</div>
</section>
<!-- 交互式展示 (Grid Work) -->
<section id="work" class="py-32 bg-neutral-900/50 relative">
<div class="max-w-7xl mx-auto px-6">
<div class="flex justify-between items-end mb-20">
<h2 class="text-5xl md:text-7xl font-display font-bold">Selected <br>Works</h2>
<div class="hidden md:block text-right">
<p class="text-gray-400">Interactive Design</p>
<p class="text-gray-400">Development</p>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<!-- 项目 1 -->
<div class="group cursor-pointer">
<div class="aspect-[3/4] relative overflow-hidden rounded-xl mb-6">
<div class="absolute inset-0 bg-black/40 group-hover:bg-transparent transition-colors z-10"></div>
<img src="https://images.unsplash.com/photo-1550684848-fac1c5b4e853?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" alt="Project 1">
</div>
<h3 class="text-2xl font-display font-bold group-hover:text-neon-blue transition-colors">Neon Genesis</h3>
<p class="text-gray-500 text-sm mt-2">UI/UX Design</p>
</div>
<!-- 项目 2 -->
<div class="group cursor-pointer mt-0 md:mt-24">
<div class="aspect-[3/4] relative overflow-hidden rounded-xl mb-6">
<div class="absolute inset-0 bg-black/40 group-hover:bg-transparent transition-colors z-10"></div>
<img src="https://images.unsplash.com/photo-1614850523459-c2f4c699c52e?q=80&w=2070&auto=format&fit=crop" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" alt="Project 2">
</div>
<h3 class="text-2xl font-display font-bold group-hover:text-neon-pink transition-colors">Liquid Dreams</h3>
<p class="text-gray-500 text-sm mt-2">WebGL Experience</p>
</div>
<!-- 项目 3 -->
<div class="group cursor-pointer mt-0 md:mt-12">
<div class="aspect-[3/4] relative overflow-hidden rounded-xl mb-6">
<div class="absolute inset-0 bg-black/40 group-hover:bg-transparent transition-colors z-10"></div>
<img src="https://images.unsplash.com/photo-1620641788421-7a1c342ea42e?q=80&w=1974&auto=format&fit=crop" class="w-full h-full object-cover transform group-hover:scale-110 transition-transform duration-700" alt="Project 3">
</div>
<h3 class="text-2xl font-display font-bold group-hover:text-neon-purple transition-colors">Cyber Void</h3>
<p class="text-gray-500 text-sm mt-2">Brand Identity</p>
</div>
</div>
</div>
</section>
<!-- 数据/特性板块 -->
<section class="py-24 border-y border-white/5">
<div class="max-w-7xl mx-auto px-6 grid grid-cols-2 md:grid-cols-4 gap-12 text-center">
<div class="space-y-2">
<span class="text-5xl font-display font-bold text-white">100%</span>
<p class="text-gray-500 text-sm uppercase tracking-widest">Bespoke Code</p>
</div>
<div class="space-y-2">
<span class="text-5xl font-display font-bold text-white">60+</span>
<p class="text-gray-500 text-sm uppercase tracking-widest">FPS Animation</p>
</div>
<div class="space-y-2">
<span class="text-5xl font-display font-bold text-white">24/7</span>
<p class="text-gray-500 text-sm uppercase tracking-widest">Creativity</p>
</div>
<div class="space-y-2">
<span class="text-5xl font-display font-bold text-white">0</span>
<p class="text-gray-500 text-sm uppercase tracking-widest">Compromises</p>
</div>
</div>
</section>
<!-- 哲学/号召 (Philosophy) -->
<section id="philosophy" class="py-40 px-6 relative">
<div class="absolute top-0 left-0 w-full h-full bg-gradient-to-b from-transparent via-neon-purple/5 to-transparent pointer-events-none"></div>
<div class="max-w-4xl mx-auto text-center relative z-10">
<h2 class="text-3xl md:text-6xl font-display font-bold mb-8 leading-tight">
Ready to transcend the ordinary?
</h2>
<p class="text-xl text-gray-400 mb-12 font-light">
Let's collaborate and build something that defies expectations.
</p>
<a href="#" class="group relative inline-flex h-14 items-center justify-center overflow-hidden rounded-full bg-white px-8 font-medium text-black transition-all duration-300 hover:bg-neon-blue hover:text-white hover:w-64">
<span class="mr-2">Start Project</span>
<svg class="w-5 h-5 transform group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg>
</a>
</div>
</section>
</main>
<!-- 页脚 -->
<footer class="border-t border-white/10 bg-black pt-20 pb-10">
<div class="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-start gap-12">
<div>
<h3 class="text-2xl font-display font-bold mb-4">AETHER.</h3>
<p class="text-gray-500 max-w-xs">Crafting digital masterpieces for the next generation of the web.</p>
</div>
<div class="flex gap-12">
<div class="space-y-4">
<h4 class="text-white font-bold uppercase text-xs tracking-widest">Socials</h4>
<ul class="space-y-2 text-gray-500">
<li><a href="#" class="hover:text-white transition-colors">Instagram</a></li>
<li><a href="#" class="hover:text-white transition-colors">Twitter</a></li>
<li><a href="#" class="hover:text-white transition-colors">LinkedIn</a></li>
</ul>
</div>
<div class="space-y-4">
<h4 class="text-white font-bold uppercase text-xs tracking-widest">Contact</h4>
<ul class="space-y-2 text-gray-500">
<li><a href="#" class="hover:text-white transition-colors">hello@aether.dev</a></li>
<li><a href="#" class="hover:text-white transition-colors">+1 (555) 000-000</a></li>
</ul>
</div>
</div>
</div>
<div class="max-w-7xl mx-auto px-6 mt-20 pt-8 border-t border-white/5 text-center md:text-left flex justify-between items-center text-gray-600 text-xs">
<p> AETHER Studio. All rights reserved.</p>
<p>Designed with Chaos & Logic.</p>
</div>
</footer>
<!-- 关键 CSS 动画定义 (放在底部确保加载) -->
<style>
@keyframes slide-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-text {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.animate-reveal {
animation: reveal-text 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
</style>
<!-- 交互逻辑脚本 -->
<script>
/**
* 1. 自定义光标逻辑 (Custom Cursor)
*/
const cursorDot = document.querySelector('.cursor-dot');
const cursorOutline = document.querySelector('.cursor-outline');
window.addEventListener('mousemove', (e) => {
const posX = e.clientX;
const posY = e.clientY;
// 点跟随
cursorDot.style.left = `${posX}px`;
cursorDot.style.top = `${posY}px`;
// 圈跟随 (带一点延迟，使用 animate)
cursorOutline.animate({
left: `${posX}px`,
top: `${posY}px`
}, { duration: 500, fill: "forwards" });
});
// 悬停时改变光标状态
const interactables = document.querySelectorAll('a, button, .group');
interactables.forEach(el => {
el.addEventListener('mouseenter', () => {
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1.5)';
cursorOutline.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
cursorOutline.style.borderColor = 'transparent';
});
el.addEventListener('mouseleave', () => {
cursorOutline.style.transform = 'translate(-50%, -50%) scale(1)';
cursorOutline.style.backgroundColor = 'transparent';
cursorOutline.style.borderColor = 'rgba(255, 255, 255, 0.5)';
});
});
/**
* 2. WebGL 流体背景逻辑 (Fluid Simulation)
* 这是一个简化的粒子系统，模拟流体噪声效果
*/
const canvas = document.getElementById('fluid-canvas');
const ctx = canvas.getContext('2d');
let width, height;
let particles = [];
function resize() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
// 鼠标位置
let mouse = { x: -1000, y: -1000 };
window.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
class Particle {
constructor() {
this.x = Math.random() * width;
this.y = Math.random() * height;
this.vx = (Math.random() - 0.5) * 0.5;
this.vy = (Math.random() - 0.5) * 0.5;
this.size = Math.random() * 2;
this.color = Math.random() > 0.5 ? '#b026ff' : '#00f3ff'; // Purple or Blue
}
update() {
// 基础移动
this.x += this.vx;
this.y += this.vy;
// 鼠标交互（排斥力）
const dx = mouse.x - this.x;
const dy = mouse.y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const maxDist = 200;
if (distance < maxDist) {
const forceDirectionX = dx / distance;
const forceDirectionY = dy / distance;
const force = (maxDist - distance) / maxDist;
const directionX = forceDirectionX * force * 2;
const directionY = forceDirectionY * force * 2;
this.vx -= directionX * 0.05;
this.vy -= directionY * 0.05;
}
// 摩擦力
this.vx *= 0.96;
this.vy *= 0.96;
// 边界检查
if (this.x < 0) this.x = width;
if (this.x > width) this.x = 0;
if (this.y < 0) this.y = height;
if (this.y > height) this.y = 0;
}
draw() {
ctx.fillStyle = this.color;
ctx.globalAlpha = 0.4;
ctx.beginPath();
ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
ctx.fill();
}
}
// 初始化粒子
for (let i = 0; i < 120; i++) {
particles.push(new Particle());
}
function animate() {
// 拖尾效果
ctx.fillStyle = 'rgba(5, 5, 5, 0.1)'; // Void color with low opacity
ctx.fillRect(0, 0, width, height);
particles.forEach(p => {
p.update();
p.draw();
});
// 连线 (Constellation effect)
ctx.strokeStyle = 'rgba(255, 255, 255, 0.05)';
ctx.lineWidth = 0.5;
for (let i = 0; i < particles.length; i++) {
for (let j = i + 1; j < particles.length; j++) {
const dx = particles[i].x - particles[j].x;
const dy = particles[i].y - particles[j].y;
const dist = Math.sqrt(dx * dx + dy * dy);
if (dist < 100) {
ctx.beginPath();
ctx.moveTo(particles[i].x, particles[i].y);
ctx.lineTo(particles[j].x, particles[j].y);
ctx.stroke();
}
}
}
requestAnimationFrame(animate);
}
animate();
/**
* 3. 3D Tilt 卡片效果 (Vanilla JS Implementation)
*/
const tiltCards = document.querySelectorAll('.tilt-card');
tiltCards.forEach(card => {
card.addEventListener('mousemove', (e) => {
const rect = card.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const centerX = rect.width / 2;
const centerY = rect.height / 2;
const rotateX = ((y - centerY) / centerY) * -10; // Max 10deg
const rotateY = ((x - centerX) / centerX) * 10;
card.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});
card.addEventListener('mouseleave', () => {
card.style.transform = `perspective(1000px) rotateX(0deg) rotateY(0deg)`;
card.style.transition = 'transform 0.5s ease';
setTimeout(() => card.style.transition = '', 500); // Remove transition for next move
});
});
/**
* 4. 简单的滚动视差 (Scroll Parallax)
*/
window.addEventListener('scroll', () => {
const scrolled = window.scrollY;
const parallaxElements = document.querySelectorAll('.parallax-container');
parallaxElements.forEach(el => {
const speed = 0.1;
el.style.transform = `translateY(${scrolled * speed}px)`;
});
});
</script>
</body>
</html>
4 个帖子 - 1 位参与者
来源: linux.do查看原文