犯懒，需求提交给deepseek，然后就有了下面的代码
<!DOCTYPE html><meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Cache-Control" content="no-cache">
<title>My Personal Space</title>
<meta name="description" content="Welcome to my personal space - Explore my work and connect with me">
<meta name="keywords" content="personal website, portfolio, creative, developer">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
html, body {
overflow: hidden;
width: 100%;
height: 100%;
position: fixed;
background: #0c0018;
color: #fff;
}
#bg-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.8;
}
.content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
z-index: 10;
padding: 20px;
mix-blend-mode: difference;
}
.header {
margin-bottom: 50px;
max-width: 800px;
}
.name {
font-size: 5rem;
font-weight: 800;
margin-bottom: 5px;
letter-spacing: -1.5px;
background: linear-gradient(to right, #ff75c3, #ffa647, #ffe83f, #9fff5b, #70e2ff);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
animation: text-glow 2s ease-in-out infinite alternate;
}
@keyframes text-glow {
0% {
text-shadow: 0 0 5px rgba(255, 255, 255, 0.1);
}
100% {
text-shadow: 0 0 15px rgba(255, 255, 255, 0.4), 0 0 30px rgba(118, 255, 247, 0.2);
}
}
.tagline {
font-size: 1.6rem;
color: rgba(255, 255, 255, 0.9);
margin-bottom: 30px;
font-weight: 300;
line-height: 1.6;
max-width: 700px;
}
.links-container {
display: flex;
gap: 30px;
margin-top: 20px;
}
.link-item {
min-width: 180px;
padding: 20px 30px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
cursor: pointer;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.link-item:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.09);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.25);
border-color: rgba(255, 255, 255, 0.3);
}
.link-item::before {
content: "";
position: absolute;
top: -60px;
left: -20px;
width: 60px;
height: 150px;
background: linear-gradient(rgba(255, 255, 255, 0.1), transparent);
transform: rotate(35deg);
transition: all 1s ease;
}
.link-item:hover::before {
left: 150px;
transition-delay: 0.1s;
}
.logo-container {
width: 70px;
height: 70px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
font-size: 1.8rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
}
.link-title {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 8px;
}
.link-desc {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
font-weight: 300;
}
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 25px;
text-align: center;
z-index: 10;
background: rgba(0, 0, 0, 0.2);
backdrop-filter: blur(10px);
border-top: 1px solid rgba(255, 255, 255, 0.05);
font-size: 1rem;
color: rgba(255, 255, 255, 0.7);
}
footer a {
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
transition: all 0.3s ease;
margin: 0 5px;
}
footer a:hover {
color: #70e2ff;
text-decoration: underline;
}
.bg-control {
position: fixed;
top: 20px;
right: 20px;
z-index: 100;
display: flex;
align-items: center;
gap: 15px;
}
.bg-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
padding: 6px 12px;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(5px);
}
.bg-selector {
padding: 8px 16px;
background: rgba(0, 0, 0, 0.5);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 12px;
color: white;
backdrop-filter: blur(5px);
cursor: pointer;
outline: none;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.bg-selector:focus {
border-color: rgba(118, 255, 247, 0.5);
}
.bg-selector option {
background: rgba(20, 10, 30, 0.95);
}
/* Particle styling */
.particle {
position: absolute;
z-index: 2;
background-color: rgba(118, 255, 247, 0.6);
border-radius: 50%;
animation: float 6s infinite ease-in-out;
box-shadow: 0 0 10px rgba(118, 255, 247, 0.4);
pointer-events: none;
}
@keyframes float {
0% {
transform: translate(0, 0) scale(0.8);
opacity: 0.6;
}
50% {
transform: translate(40px, 40px) scale(1.2);
opacity: 1;
}
100% {
transform: translate(0, 0) scale(0.8);
opacity: 0.6;
}
}
/* Responsive design */
@media (max-width: 768px) {
.name {
font-size: 3.5rem;
}
.tagline {
font-size: 1.3rem;
}
.links-container {
flex-direction: column;
gap: 20px;
width: 100%;
max-width: 400px;
}
.link-item {
width: 100%;
}
.bg-control {
top: 10px;
right: 10px;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
}
@media (max-width: 480px) {
.name {
font-size: 2.8rem;
}
.tagline {
font-size: 1.1rem;
}
.logo-container {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
}
</style><canvas id="bg-canvas"></canvas>
<!-- Floating particles -->
<div class="particle" style="top:10%; left:15%; width:8px; height:8px; animation-delay:0s;"></div>
<div class="particle" style="top:80%; left:20%; width:6px; height:6px; animation-delay:-1.5s;"></div>
<div class="particle" style="top:25%; left:85%; width:10px; height:10px; animation-delay:-2s;"></div>
<div class="particle" style="top:55%; left:75%; width:7px; height:7px; animation-delay:-4s;"></div>
<div class="particle" style="top:85%; left:95%; width:9px; height:9px; animation-delay:-0.5s;"></div>
<div class="content">
<div class="header">
<h1 class="name">ALEX RIVER</h1>
<p class="tagline">Digital Designer & Creative Developer from New York</p>
<div class="links-container">
<a href="https://github.com" target="_blank" rel="noopener" class="link-item">
<div class="logo-container">
<span>👨💻</span>
</div>
<div class="link-title">GitHub</div>
<div class="link-desc">View my code & projects</div>
</a>
<a href="https://dribbble.com" target="_blank" rel="noopener" class="link-item">
<div class="logo-container">
<span>🎨</span>
</div>
<div class="link-title">Dribbble</div>
<div class="link-desc">Browse my designs</div>
</a>
<a href="mailto:contact@example.com" class="link-item">
<div class="logo-container">
<span>📬</span>
</div>
<div class="link-title">Contact</div>
<div class="link-desc">Get in touch</div>
</a>
</div>
</div>
</div>
<footer>
<div>© 2023 ALEX RIVER STUDIO — ALL RIGHTS RESERVED 🔒</div>
<div>
Inspired by the night sky and cosmic patterns
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="" viewBox="0 0 24 24">
<path d="M20.92 2.38A15.72 15.72 0 0 0 17.5 2a8.26 8.26 0 0 0-6 2.06Q9.89 5.67 8.31 7.27c-1.21-.26-2 .25-2.53 1a4.66 4.66 0 0 0 0 6.17l4.88 4.89c1.42 1.4 3 2.12 4.81 2.12a4.77 4.77 0 0 0 4.7-2.16c.72-.92.95-1.76.69-2.93a15.34 15.34 0 0 0 3.06-6.01A10 10 0 0 0 21 4.25a1.14 1.14 0 0 0-.08-1.87z"/>
</svg>
</div>
</footer>
<div class="bg-control">
<div class="bg-label">BACKGROUND</div>
<select class="bg-selector" id="bgSelector">
<option value="default">Cosmic Dust</option>
<option value="blue-purple">Deep Nebula</option>
<option value="pink">Night Bloom</option>
<option value="dark">Abyss Space</option>
<option value="sunrise">Galactic Sunrise</option>
<option value="abstract">Star Fragment</option>
</select>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const canvas = document.getElementById('bg-canvas');
const ctx = canvas.getContext('2d');
let animationId;
// Set canvas size to match the window
function setCanvasSize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Initialize the background with stars
function initBackground() {
setCanvasSize();
// Dark space background
ctx.fillStyle = '#050518';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create stars
ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
const starCount = 200;
for (let i = 0; i < starCount; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = Math.random() * 1.5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
}
// Create larger stars
ctx.fillStyle = 'rgba(255, 255, 255, 0.95)';
const bigStarCount = 20;
for (let i = 0; i < bigStarCount; i++) {
const x = Math.random() * canvas.width;
const y = Math.random() * canvas.height;
const radius = Math.random() * 2 + 1.5;
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fill();
// Glow effect
const gradient = ctx.createRadialGradient(x, y, 0, x, y, radius * 3);
gradient.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
ctx.fillStyle = gradient;
ctx.beginPath();
ctx.arc(x, y, radius * 3, 0, Math.PI * 2);
ctx.fill();
}
}
// Animation effect
function animateBackground() {
// Clear the canvas
ctx.fillStyle = 'rgba(5, 5, 24, 0.15)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Create new stars periodically
if (Math.random() < 0.1) {
createShootingStar();
}
// Animation loop
animationId = requestAnimationFrame(animateBackground);
}
function createShootingStar() {
const x = Math.random() * canvas.width;
const y = 0;
const size = Math.random() * 2 + 1;
const speed = Math.random() * 5 + 5;
let currentX = x;
let currentY = y;
function drawShootingStar() {
ctx.beginPath();
ctx.moveTo(currentX, currentY);
currentX += speed / 2;
currentY += speed;
// Calculate glow gradient
const gradient = ctx.createLinearGradient(currentX, currentY, currentX - 10, currentY - 20);
gradient.addColorStop(0, 'rgba(120, 230, 255, 0.8)');
gradient.addColorStop(1, 'transparent');
ctx.strokeStyle = gradient;
ctx.lineWidth = size;
ctx.lineTo(currentX, currentY);
ctx.stroke();
// Continue until off screen
if (currentY < canvas.height && currentX < canvas.width) {
requestAnimationFrame(drawShootingStar);
}
}
drawShootingStar();
}
// Background selector functionality
const bgSelector = document.getElementById('bgSelector');
bgSelector.addEventListener('change', function() {
// For demonstration purposes, we'll change the colors programatically
// In a full implementation you might replace the entire background
switch(this.value) {
case 'blue-purple':
canvas.style.filter = "hue-rotate(180deg)";
break;
case 'pink':
canvas.style.filter = "hue-rotate(300deg) saturate(2)";
break;
case 'dark':
canvas.style.filter = "brightness(0.7)";
break;
case 'sunrise':
canvas.style.filter = "hue-rotate(40deg) brightness(1.2)";
break;
case 'abstract':
canvas.style.filter = "hue-rotate(120deg) contrast(1.5)";
break;
default:
canvas.style.filter = "none";
}
});
// Set up and start animation
setCanvasSize();
window.addEventListener('resize', () => {
setCanvasSize();
initBackground();
});
initBackground();
animateBackground();
// Floating particles
const particles = document.querySelectorAll('.particle');
particles.forEach(particle => {
particle.style.animationDuration = Math.random() * 8 + 8 + 's';
particle.style.animationDelay = Math.random() * -10 + 's';
});
});
</script>
没有评论