parent
c5a7e5ab03
commit
1f9126b473
|
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…
Reference in new issue