pull/1/head
pyg8ivf7o 5 months ago
parent c5a7e5ab03
commit 1f9126b473

@ -541,7 +541,7 @@ h1, .feature h2 {
}
/*顶部栏和登录按钮*/
.header {
background-image: url('/image/banner-1.jpg');
background-image: url('./image/banner-1.jpg');
background-size: cover;
background-position: top;
height: 400px;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 86 KiB

@ -1,206 +0,0 @@
function consultationFunction() {
var userInput = document.getElementById('consultation-input').value;
alert("您咨询的问题是: " + userInput);
// 这里可以添加更多的逻辑来处理用户的咨询
}
document.addEventListener('DOMContentLoaded', function() {
const createSparkle = (x, y) => {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle-point');
sparkle.style.left = `${x}px`;
sparkle.style.top = `${y}px`;
document.body.appendChild(sparkle);
// Remove sparkle after animation
setTimeout(() => {
sparkle.remove();
}, 2000);
};
// Create random sparkles
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createSparkle(x, y);
}, 500);
});
document.addEventListener('DOMContentLoaded', function() {
const createSparkle = (x, y) => {
const sparkle = document.createElement('div');
sparkle.classList.add('sparkle-point');
sparkle.style.left = `${x}px`;
sparkle.style.top = `${y}px`;
document.body.appendChild(sparkle);
// Remove sparkle after animation
setTimeout(() => {
sparkle.remove();
}, 2000);
};
// Create random sparkles
setInterval(() => {
const x = Math.random() * window.innerWidth;
const y = Math.random() * window.innerHeight;
createSparkle(x, y);
}, 500);
});
particlesJS.load('particles-js', 'path_to_particles_config_json.json', function() {
console.log('particles.js loaded - callback');
});
function create3DBackground() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
camera.position.z = 5;
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
create3DBackground();
function initParticles() {
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const particles = new THREE.Geometry();
const pMaterial = new THREE.PointsMaterial({ color: 0xffffff, size: 5 });
for (let i = 0; i < 200; i++) {
const particle = new THREE.Vector3(
Math.random() * 2000 - 1000,
Math.random() * 2000 - 1000,
Math.random() * 2000 - 1000
);
particles.vertices.push(particle);
}
const particleSystem = new THREE.Points(particles, pMaterial);
scene.add(particleSystem);
camera.position.z = 500;
function animate() {
requestAnimationFrame(animate);
particleSystem.rotation.x += 0.01;
particleSystem.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();
}
initParticles();
function createFloatingCircles() {
for (let i = 0; i < 10; i++) {
const circle = document.createElement('div');
circle.className = 'floating-circle';
circle.style.width = `${Math.random() * 50 + 10}px`;
circle.style.height = circle.style.width;
circle.style.left = `${Math.random() * window.innerWidth}px`;
circle.style.top = `${Math.random() * window.innerHeight}px`;
document.body.appendChild(circle);
}
}
createFloatingCircles();
// JavaScript代码
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const particles = [];
const numberOfParticles = 100;
for (let i = 0; i < numberOfParticles; i++) {
particles.push(new Particle());
}
function animate() {
requestAnimationFrame(animate);
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach(particle => {
particle.move();
particle.draw(ctx);
});
}
document.addEventListener('mousemove', (event) => {
particles.forEach(particle => {
particle.attract(event.x, event.y);
});
});
class Particle {
constructor() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.radius = Math.random() * 3 + 1;
this.alpha = 1;
this.velocity = {
x: (Math.random() - 0.5) * 2,
y: (Math.random() - 0.5) * 2
};
}
move() {
this.x += this.velocity.x;
this.y += this.velocity.y;
this.alpha -= 0.0001;
if (this.alpha <= 0) {
this.radius = Math.random() * 3 + 1;
this.alpha = 1;
this.velocity = {
x: (Math.random() - 0.5) * 2,
y: (Math.random() - 0.5) * 2
};
}
}
attract(x, y) {
const dx = x - this.x;
const dy = y - this.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const force = (5 * this.radius) / distance;
this.velocity.x += force * (dx / distance);
this.velocity.y += force * (dy / distance);
}
draw(ctx) {
ctx.beginPath;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fillStyle = `rgba(255, 255, 255, ${this.alpha})`;
ctx.fill();
}
}
animate();
var shaderMaterial = new THREE.ShaderMaterial({
vertexShader: document.getElementById('vertexShader').textContent,
fragmentShader: document.getElementById('fragmentShader').textContent
});
var mesh = new THREE.Mesh(geometry, shaderMaterial);
scene.add(mesh);

File diff suppressed because it is too large Load Diff

@ -1,476 +0,0 @@
/* 基本重置 */
body, h1, h2, p, a {
margin: 0;
padding: 0;
text-decoration: none;
color: rgb(255, 255, 255);
}
/* 基础字体和背景 */
body {
font-family: 'Arial', sans-serif;
background-color: #f8f8f8;
color: #333;
}
header {
background-color: #d9534f;
color: #fff;
padding: 20px 0;
text-align: center;
}
header h1 {
margin: 0;
}
main {
padding: 20px;
text-align: center;
}
footer {
background-color: #fe5b56;
color: #fff;
text-align: center;
padding: 10px 0;
position: fixed;
bottom: 0;
width: 100%;
}
/* 输入框和按钮样式 */
input[type="text"] {
padding: 10px;
margin: 10px 0;
border: 1px solid #ddd;
border-radius: 5px;
width: calc(100% - 22px); /* 减去padding和border的宽度 */
}
button {
padding: 10px 20px;
background-color: #d9534f;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #c9302c;
}
/* 动画效果 */
@keyframes fadeInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
header, main, footer {
animation: fadeInDown 1s ease-in-out;
}
/* 响应式设计 */
@media (max-width: 768px) {
/* 针对小屏幕的样式调整 */
}
/* 动态阴影效果 */
@keyframes shadowPulse {
0%, 100% { box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
50% { box-shadow: 0 0 20px rgba(0, 0, 0, 0.8); }
}
button:hover {
animation: shadowPulse 1.5s infinite;
}
/* 文字跳动动画*/
h1 {
animation: jump 1.5s ease-in-out infinite;
}
@keyframes jump {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
/* 输入框和按钮的悬停效果*/
input[type="text"]:hover, button:hover {
border: 1px solid #d9534f;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
/*按钮点击动画*/
button:active {
transform: scale(0.95);
background-color: #b52b27;
}
/*光晕效果*/
.glow {
animation: glowEffect 1.5s infinite alternate;
}
@keyframes glowEffect {
from {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #d9534f, 0 0 20px #d9534f, 0 0 25px #d9534f, 0 0 30px #d9534f;
}
to {
text-shadow: 0 0 10px #fff, 0 0 20px #d9534f, 0 0 30px #d9534f, 0 0 40px #d9534f, 0 0 50px #d9534f, 0 0 60px #d9534f;
}
}
/* 3D翻转效果*/
.feature {
perspective: 1000px;
}
.feature:hover .feature-inner {
transform: rotateY(360deg);
transition: transform 15s;
}
/*视差滚动效果*/
.parallax-section {
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
/* 粒子背景*/
.particle-background {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.particle {
fill: rgba(255, 255, 255, 0.8);
animation: moveParticles 10s infinite linear;
}
@keyframes moveParticles {
0% { transform: translate(0, 0); }
100% { transform: translate(100px, 100px); }
}
/*线条动画*/
.dynamic-line {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: dash 3s linear infinite;
}
@keyframes dash {
from {
stroke-dashoffset: 300;
}
to {
stroke-dashoffset: 0;
}
}
/*光晕效果*/
button {
position: relative;
overflow: hidden;
}
button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 300%;
height: 200%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%) rotate(45deg);
transition: all 0.5s;
}
button:hover::before {
width: 100%;
height: 100%;
}
/*闪烁效果*/
@keyframes blinker {
50% { opacity: 0; }
}
.blink-text {
animation: blinker 1s linear infinite;
}
/* 打字机效果*/
.typewriter {
font-family: monospace;
overflow: hidden;
white-space: nowrap;
width: 100%;
animation: typewriter 4s steps(40) 1s infinite;
}
@keyframes typewriter {
0% { width: 0; }
100% { width: 100%; }
}
/* 3D文字效果*/
.three-d-text {
transform: rotateX(45deg) rotateY(45deg);
transform-style: preserve-3d;
perspective: 600px;
}
/*渐变文字效果*/
.gradient-text {
background: -webkit-linear-gradient(45deg, #d9534f, #fe5b56);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/*动态阴影效果*/
.dynamic-shadow {
transition: box-shadow 0.3s ease-in-out;
}
.dynamic-shadow:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
}
/*光点闪烁效果*/
.sparkle-point {
position: absolute;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.8);
pointer-events: none;
animation: sparkle 2s infinite;
}
@keyframes sparkle {
0% { opacity: 0; transform: scale(0); }
50% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0); }
}
/*动态渲染效果*/
.render-effect {
animation: renderEffect 5s infinite alternate;
}
@keyframes renderEffect {
0%, 100% { filter: grayscale(0); }
50% { filter: grayscale(1); }
}
/* 全屏背景动画*/
body {
background: linear-gradient(-45deg, #000, #7c7c7c, #000);
background-size: 400% 1000%;
animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
/*线条动画*/
.waves {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 90px;
z-index: -1;
}
@keyframes backgroundGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
body {
animation: backgroundGradient 15s ease infinite;
}
a {
color: #fdfdfd;
}
a:hover {
color: #000000;
}
footer {
position: fixed;
bottom: 0;
width: 100%;
background-color: #d9534f;
color: white;
}
.svg-background {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 确保SVG在内容的后面 */
}
@keyframes colorShift {
0% { background-color: #d9534f; }
50% { background-color: #fe5b56; }
100% { background-color: #d9534f; }
}
button {
animation: colorShift 3s infinite;
}
.blink {
animation: blink 1s step-start infinite;
}
@keyframes blink {
50% { opacity: 0; }
}
input[type="text"]:hover {
background-color: rgba(217, 83, 79, 0.1);
}
.parallax-section {
background-image: url('your-image.jpg');
background-attachment: fixed;
background-size: cover;
height: 100vh;
}
/*字体动态改变*/
h2 {
transition: font-size 0.3s;
}
h2:hover {
font-size: 2em;
}
/*动态内容加载*/
.main-content {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 旋转效果*/
footer {
transition: transform 0.5s;
}
footer:hover {
transform: rotate(5deg);
}
.dynamic-line {
stroke: #d9534f;
stroke-width: 2;
fill: none;
animation: dash 5s linear infinite;
}
@keyframes dash {
0% { stroke-dasharray: 0, 100; }
100% { stroke-dasharray: 100, 0; }
}
button {
perspective: 1000px;
}
button:hover {
transform: rotateX(10deg) rotateY(10deg);
transition: transform 0.3s;
}
/*文字打字效果*/
.typewriter {
overflow: hidden;
white-space: nowrap;
border-right: .15em solid orange;
animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: orange; }
}
/*旋转加载*/
.loading {
border: 8px solid #f3f3f3;
border-top: 8px solid #3498db;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 2s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/*字体阴影动态*/
h2 {
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
transition: text-shadow 0.3s ease;
}
h2:hover {
text-shadow: 0 0 20px rgba(255, 0, 0, 1);
}
/*彩色阴影*/
button {
box-shadow: 0 4px 20px rgba(217, 83, 79, 0.5);
}
button:hover {
box-shadow: 0 8px 30px rgba(217, 83, 79, 0.8);
}
.particle-background {
background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 10%, transparent 10%);
animation: particleAnimation 5s infinite;
}
/*随机粒子背景*/
@keyframes particleAnimation {
0% { background-size: 0%; }
100% { background-size: 100%; }
}
/*光环效果*/
header {
box-shadow: 0 0 20px rgba(217, 83, 79, 0.6);
}
/*悬浮按钮效果*/
button {
transition: transform 0.3s ease;
}
button:hover {
transform: translateY(-5px);
}
/*玻璃效果*/
main {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 10px;
padding: 20px;
}
Loading…
Cancel
Save