Добавить 2.html
This commit is contained in:
parent
32e64a6367
commit
50999d1e73
|
|
@ -0,0 +1,508 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Abstract Design</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
font-family: 'Arial', sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background: linear-gradient(135deg, #a7f3d0 0%, #6ee7b7 50%, #a7f3d0 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Organic Blob Shapes */
|
||||
.blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(40px);
|
||||
opacity: 0.6;
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.blob-1 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
|
||||
top: -100px;
|
||||
left: -100px;
|
||||
border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.blob-2 {
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
bottom: -50px;
|
||||
right: -50px;
|
||||
border-radius: 40% 60% 70% 30% / 40% 40% 60% 50%;
|
||||
animation-delay: -5s;
|
||||
}
|
||||
|
||||
.blob-3 {
|
||||
width: 350px;
|
||||
height: 350px;
|
||||
background: linear-gradient(135deg, #6ee7b7 0%, #34d399 100%);
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%;
|
||||
animation-delay: -10s;
|
||||
}
|
||||
|
||||
.blob-4 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: linear-gradient(135deg, #059669 0%, #047857 100%);
|
||||
top: 20%;
|
||||
right: 20%;
|
||||
border-radius: 50% 50% 40% 60% / 50% 40% 60% 50%;
|
||||
animation-delay: -15s;
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg) scale(1);
|
||||
}
|
||||
33% {
|
||||
transform: translate(30px, -50px) rotate(120deg) scale(1.1);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-20px, 30px) rotate(240deg) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
/* SVG Container for lines and geometric shapes */
|
||||
.svg-container {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Wavy Lines */
|
||||
.wavy-line {
|
||||
fill: none;
|
||||
stroke: white;
|
||||
stroke-width: 3;
|
||||
stroke-linecap: round;
|
||||
opacity: 0.9;
|
||||
filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
|
||||
}
|
||||
|
||||
/* Nodes/Dots */
|
||||
.node {
|
||||
fill: white;
|
||||
filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
|
||||
animation: pulse 3s infinite ease-in-out;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; transform: scale(1); }
|
||||
50% { opacity: 0.7; transform: scale(1.2); }
|
||||
}
|
||||
|
||||
/* Grid Patterns */
|
||||
.grid-cube {
|
||||
position: absolute;
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
animation: rotate3d 20s infinite linear;
|
||||
}
|
||||
|
||||
.grid-cube::before,
|
||||
.grid-cube::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.grid-cube::before {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotateX(60deg) rotateY(45deg);
|
||||
}
|
||||
|
||||
.grid-cube::after {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: rotateX(60deg) rotateY(-45deg);
|
||||
}
|
||||
|
||||
.cube-1 {
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.cube-2 {
|
||||
top: 60%;
|
||||
left: 70%;
|
||||
animation-delay: -7s;
|
||||
}
|
||||
|
||||
.cube-3 {
|
||||
top: 70%;
|
||||
left: 15%;
|
||||
animation-delay: -14s;
|
||||
}
|
||||
|
||||
@keyframes rotate3d {
|
||||
0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
|
||||
100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
|
||||
}
|
||||
|
||||
/* Circular Rings */
|
||||
.ring {
|
||||
position: absolute;
|
||||
border: 3px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 50%;
|
||||
animation: expand 8s infinite ease-out;
|
||||
}
|
||||
|
||||
.ring-1 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
top: 30%;
|
||||
left: 40%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.ring-2 {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
top: 15%;
|
||||
right: 30%;
|
||||
animation-delay: -2s;
|
||||
}
|
||||
|
||||
.ring-3 {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
bottom: 40%;
|
||||
right: 15%;
|
||||
animation-delay: -4s;
|
||||
}
|
||||
|
||||
@keyframes expand {
|
||||
0% {
|
||||
transform: scale(0.5);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.5);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Small decorative circles */
|
||||
.small-circle {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
border-radius: 50%;
|
||||
animation: float-small 10s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
top: 25%;
|
||||
left: 20%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 45%;
|
||||
left: 35%;
|
||||
animation-delay: -3s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
bottom: 25%;
|
||||
right: 40%;
|
||||
animation-delay: -6s;
|
||||
}
|
||||
|
||||
@keyframes float-small {
|
||||
0%, 100% { transform: translateY(0) translateX(0); }
|
||||
25% { transform: translateY(-20px) translateX(10px); }
|
||||
50% { transform: translateY(10px) translateX(-10px); }
|
||||
75% { transform: translateY(-10px) translateX(5px); }
|
||||
}
|
||||
|
||||
/* Grid Lines Pattern */
|
||||
.grid-pattern {
|
||||
position: absolute;
|
||||
background-image:
|
||||
linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
|
||||
background-size: 50px 50px;
|
||||
animation: grid-move 20s infinite linear;
|
||||
}
|
||||
|
||||
.grid-1 {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
top: 5%;
|
||||
right: 5%;
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
bottom: 10%;
|
||||
left: 5%;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@keyframes grid-move {
|
||||
0% { transform: translate(0, 0); }
|
||||
100% { transform: translate(50px, 50px); }
|
||||
}
|
||||
|
||||
/* Interactive cursor effect */
|
||||
.cursor-glow {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
pointer-events: none;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.container:hover .cursor-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container" id="container">
|
||||
<!-- Organic Blobs -->
|
||||
<div class="blob blob-1"></div>
|
||||
<div class="blob blob-2"></div>
|
||||
<div class="blob blob-3"></div>
|
||||
<div class="blob blob-4"></div>
|
||||
|
||||
<!-- Grid Patterns -->
|
||||
<div class="grid-pattern grid-1"></div>
|
||||
<div class="grid-pattern grid-2"></div>
|
||||
|
||||
<!-- 3D Grid Cubes -->
|
||||
<div class="grid-cube cube-1"></div>
|
||||
<div class="grid-cube cube-2"></div>
|
||||
<div class="grid-cube cube-3"></div>
|
||||
|
||||
<!-- Expanding Rings -->
|
||||
<div class="ring ring-1"></div>
|
||||
<div class="ring ring-2"></div>
|
||||
<div class="ring ring-3"></div>
|
||||
|
||||
<!-- Small Floating Circles -->
|
||||
<div class="small-circle circle-1"></div>
|
||||
<div class="small-circle circle-2"></div>
|
||||
<div class="small-circle circle-3"></div>
|
||||
|
||||
<!-- SVG for wavy lines and connections -->
|
||||
<svg class="svg-container" id="svgContainer" preserveAspectRatio="xMidYMid slice">
|
||||
<defs>
|
||||
<filter id="glow">
|
||||
<feGaussianBlur stdDeviation="3" result="coloredBlur"/>
|
||||
<feMerge>
|
||||
<feMergeNode in="coloredBlur"/>
|
||||
<feMergeNode in="SourceGraphic"/>
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
<!-- Paths will be generated by JavaScript -->
|
||||
<g id="pathsGroup"></g>
|
||||
<g id="nodesGroup"></g>
|
||||
</svg>
|
||||
|
||||
<!-- Cursor Glow Effect -->
|
||||
<div class="cursor-glow" id="cursorGlow"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Configuration for wavy lines and nodes
|
||||
const config = {
|
||||
numPaths: 5,
|
||||
nodeRadius: 8,
|
||||
pathColor: '#ffffff',
|
||||
pathWidth: 3
|
||||
};
|
||||
|
||||
// Generate random control points for bezier curves
|
||||
function generateWavyPath(startX, startY, endX, endY, numControlPoints = 3) {
|
||||
let pathData = `M ${startX} ${startY}`;
|
||||
const segmentLength = (endX - startX) / numControlPoints;
|
||||
|
||||
for (let i = 0; i < numControlPoints; i++) {
|
||||
const cp1x = startX + (i * segmentLength) + (segmentLength / 3);
|
||||
const cp1y = startY + Math.sin(i * 2) * 100 + Math.random() * 50;
|
||||
const cp2x = startX + (i * segmentLength) + (2 * segmentLength / 3);
|
||||
const cp2y = startY + Math.sin((i + 1) * 2) * 100 + Math.random() * 50;
|
||||
const endX_point = startX + (i + 1) * segmentLength;
|
||||
const endY_point = i === numControlPoints - 1 ? endY : startY + Math.sin((i + 1) * 2) * 80;
|
||||
|
||||
pathData += ` C ${cp1x} ${cp1y}, ${cp2x} ${cp2y}, ${endX_point} ${endY_point}`;
|
||||
}
|
||||
|
||||
return pathData;
|
||||
}
|
||||
|
||||
// Create paths and nodes
|
||||
function createPathsAndNodes() {
|
||||
const container = document.getElementById('container');
|
||||
const pathsGroup = document.getElementById('pathsGroup');
|
||||
const nodesGroup = document.getElementById('nodesGroup');
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerHeight;
|
||||
|
||||
// Define node positions
|
||||
const nodes = [
|
||||
{ x: width * 0.15, y: height * 0.35 },
|
||||
{ x: width * 0.35, y: height * 0.55 },
|
||||
{ x: width * 0.55, y: height * 0.25 },
|
||||
{ x: width * 0.75, y: height * 0.65 },
|
||||
{ x: width * 0.85, y: height * 0.45 },
|
||||
{ x: width * 0.25, y: height * 0.75 },
|
||||
{ x: width * 0.65, y: height * 0.85 }
|
||||
];
|
||||
|
||||
// Define connections between nodes
|
||||
const connections = [
|
||||
[0, 1],
|
||||
[1, 2],
|
||||
[2, 3],
|
||||
[3, 4],
|
||||
[1, 5],
|
||||
[5, 6],
|
||||
[6, 3]
|
||||
];
|
||||
|
||||
// Create paths
|
||||
connections.forEach((conn, index) => {
|
||||
const startNode = nodes[conn[0]];
|
||||
const endNode = nodes[conn[1]];
|
||||
|
||||
const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
|
||||
const pathData = generateWavyPath(
|
||||
startNode.x, startNode.y,
|
||||
endNode.x, endNode.y,
|
||||
2 + Math.floor(Math.random() * 2)
|
||||
);
|
||||
|
||||
path.setAttribute('d', pathData);
|
||||
path.setAttribute('class', 'wavy-line');
|
||||
path.setAttribute('filter', 'url(#glow)');
|
||||
path.style.opacity = 0.6 + Math.random() * 0.4;
|
||||
path.style.animationDelay = `${index * 0.5}s`;
|
||||
|
||||
pathsGroup.appendChild(path);
|
||||
});
|
||||
|
||||
// Create nodes
|
||||
nodes.forEach((node, index) => {
|
||||
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
|
||||
circle.setAttribute('cx', node.x);
|
||||
circle.setAttribute('cy', node.y);
|
||||
circle.setAttribute('r', config.nodeRadius);
|
||||
circle.setAttribute('class', 'node');
|
||||
circle.style.animationDelay = `${index * 0.3}s`;
|
||||
|
||||
nodesGroup.appendChild(circle);
|
||||
});
|
||||
}
|
||||
|
||||
// Mouse interaction
|
||||
function initMouseInteraction() {
|
||||
const container = document.getElementById('container');
|
||||
const cursorGlow = document.getElementById('cursorGlow');
|
||||
|
||||
container.addEventListener('mousemove', (e) => {
|
||||
const rect = container.getBoundingClientRect();
|
||||
const x = e.clientX - rect.left;
|
||||
const y = e.clientY - rect.top;
|
||||
|
||||
cursorGlow.style.left = x + 'px';
|
||||
cursorGlow.style.top = y + 'px';
|
||||
});
|
||||
}
|
||||
|
||||
// Animate paths on load
|
||||
function animatePaths() {
|
||||
const paths = document.querySelectorAll('.wavy-line');
|
||||
paths.forEach((path, index) => {
|
||||
const length = path.getTotalLength();
|
||||
path.style.strokeDasharray = length;
|
||||
path.style.strokeDashoffset = length;
|
||||
|
||||
setTimeout(() => {
|
||||
path.style.transition = 'stroke-dashoffset 2s ease-in-out';
|
||||
path.style.strokeDashoffset = '0';
|
||||
}, index * 200);
|
||||
});
|
||||
}
|
||||
|
||||
// Regenerate on resize
|
||||
let resizeTimeout;
|
||||
window.addEventListener('resize', () => {
|
||||
clearTimeout(resizeTimeout);
|
||||
resizeTimeout = setTimeout(() => {
|
||||
document.getElementById('pathsGroup').innerHTML = '';
|
||||
document.getElementById('nodesGroup').innerHTML = '';
|
||||
createPathsAndNodes();
|
||||
setTimeout(animatePaths, 100);
|
||||
}, 250);
|
||||
});
|
||||
|
||||
// Initialize
|
||||
window.addEventListener('load', () => {
|
||||
createPathsAndNodes();
|
||||
initMouseInteraction();
|
||||
setTimeout(animatePaths, 500);
|
||||
});
|
||||
|
||||
// Add parallax effect to blobs
|
||||
document.addEventListener('mousemove', (e) => {
|
||||
const blobs = document.querySelectorAll('.blob');
|
||||
const x = e.clientX / window.innerWidth;
|
||||
const y = e.clientY / window.innerHeight;
|
||||
|
||||
blobs.forEach((blob, index) => {
|
||||
const speed = (index + 1) * 20;
|
||||
const xOffset = (0.5 - x) * speed;
|
||||
const yOffset = (0.5 - y) * speed;
|
||||
blob.style.transform += ` translate(${xOffset}px, ${yOffset}px)`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue