Merge branch 'main' of https://bdgit.educoder.net/pyg8ivf7o/legal_counsel into MSR_breach
commit
944ffd384b
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -1 +0,0 @@
|
||||
commit docs
|
||||
|
After Width: | Height: | Size: 884 KiB |
|
After Width: | Height: | Size: 230 KiB |
|
After Width: | Height: | Size: 259 KiB |
|
After Width: | Height: | Size: 132 KiB |
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>案件匹配</title>
|
||||
<link rel="stylesheet" href="styles1.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>案件匹配</h1>
|
||||
<a href="index.html">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>上传您的案件详情匹配类似案例</h2>
|
||||
<p>在这里，您可以输入您想匹配的案件，我们将提供相关的案例</p>
|
||||
<input type="text" id="consultation-input" placeholder="输入相关案件...">
|
||||
<button onclick="consultationFunction()">提交咨询</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务系统</p>
|
||||
</footer>
|
||||
<!-- SVG Background -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>法律咨询</title>
|
||||
<link rel="stylesheet" href="styles1.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>法律咨询</h1>
|
||||
<a href="index.html">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>输入您的问题获取法律建议</h2>
|
||||
<p>在这里，您可以输入您的法律问题，我们将提供专业的法律建议</p>
|
||||
<input type="text" id="consultation-input" placeholder="输入法律问题...">
|
||||
<button onclick="consultationFunction()">提交咨询</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务系统</p>
|
||||
</footer>
|
||||
<!-- SVG Background -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
After Width: | Height: | Size: 86 KiB |
@ -0,0 +1,114 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>智能法律服务系统</title>
|
||||
<link rel="stylesheet" href="styles0.css">
|
||||
|
||||
<style>
|
||||
@keyframes sparkle {
|
||||
0%, 100% { opacity: 0; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.sparkle-point {
|
||||
position: absolute;
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
animation: sparkle 2s infinite;
|
||||
}
|
||||
|
||||
.sparkle-point:nth-child(1) {
|
||||
top: 20%;
|
||||
left: 15%;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.sparkle-point:nth-child(2) {
|
||||
top: 40%;
|
||||
left: 70%;
|
||||
animation-delay: 1s;
|
||||
}
|
||||
|
||||
.sparkle-point:nth-child(3) {
|
||||
top: 60%;
|
||||
left: 30%;
|
||||
animation-delay: 2s;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 浮动的半透明图形 -->
|
||||
<div class="floaty" style="top:20%; left:30%; width:50px; height:50px;"></div>
|
||||
<div class="floaty" style="top:50%; left:70%; width:30px; height:30px;"></div>
|
||||
<!-- 光点闪烁 -->
|
||||
<div class="sparkle-point" style="top:10%; left:15%;"></div>
|
||||
<div class="sparkle-point" style="top:30%; left:80%;"></div>
|
||||
<!-- 动态背景 -->
|
||||
<div class="dynamic-background"></div>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<svg class="particle-background" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle class="particle" cx="80" cy="80" r="5" />
|
||||
<circle class="particle" cx="120" cy="80" r="3" />
|
||||
<circle class="particle" cx="160" cy="80" r="4" />
|
||||
<!-- More particles -->
|
||||
</svg>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
|
||||
<header class="header">
|
||||
<div class="top-bar">
|
||||
<a href="login.html" class="login-btn">登录</a>
|
||||
<!-- 文字发光 -->
|
||||
<h1 class="glow-text">智能法律服务系统</h1>
|
||||
</div>
|
||||
<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
|
||||
<line class="dynamic-line" x1="0" y1="0" x2="100" y2="100" stroke="#fff" stroke-width="2" />
|
||||
</svg>
|
||||
</header>
|
||||
<canvas id="particleCanvas"></canvas>
|
||||
<div class="background-animate" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;"></div>
|
||||
<div class="background-animate"></div>
|
||||
<div class="sparkle-point"></div>
|
||||
<div class="sparkle-point"></div>
|
||||
<div class="sparkle-point"></div>
|
||||
|
||||
<main>
|
||||
<div class="feature-container">
|
||||
<section class="feature-row">
|
||||
<a href="consultation.html" class="feature">
|
||||
<h2>法律咨询</h2>
|
||||
<p>输入您的问题获取法律建议</p>
|
||||
</a>
|
||||
<a href="case-matching.html" class="feature">
|
||||
<h2>案件匹配</h2>
|
||||
<p>上传您的案件详情匹配类似案例</p>
|
||||
</a>
|
||||
<a href="legal-dictionary.html" class="feature">
|
||||
<h2>法律术语词典</h2>
|
||||
<p>查询和解释法律术语</p>
|
||||
</a>
|
||||
</section>
|
||||
<section class="feature-row">
|
||||
<a href="personalized-learning.html" class="feature">
|
||||
<h2>个性化学习计划</h2>
|
||||
<p>根据您的需求推荐学习资源</p>
|
||||
</a>
|
||||
<a href="news-subscription.html" class="feature">
|
||||
<h2>法律新闻订阅</h2>
|
||||
<p>订阅您感兴趣的法律新闻</p>
|
||||
</a>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!--https://getwaves.io/-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="#ff5751" fill-opacity="1" d="M0,64L10.4,58.7C20.9,53,42,43,63,32C83.5,21,104,11,125,32C146.1,53,167,107,188,122.7C208.7,139,230,117,250,112C271.3,107,292,117,313,133.3C333.9,149,355,171,376,202.7C396.5,235,417,277,438,266.7C459.1,256,480,192,501,181.3C521.7,171,543,213,563,213.3C584.3,213,605,171,626,165.3C647,160,668,192,689,176C709.6,160,730,96,751,106.7C772.2,117,793,203,814,240C834.8,277,856,267,877,266.7C897.4,267,918,277,939,256C960,235,981,181,1002,138.7C1022.6,96,1043,64,1064,74.7C1085.2,85,1106,139,1127,165.3C1147.8,192,1169,192,1190,170.7C1210.4,149,1231,107,1252,112C1273,117,1294,171,1315,202.7C1335.7,235,1357,245,1377,208C1398.3,171,1419,85,1430,42.7L1440,0L1440,320L1429.6,320C1419.1,320,1398,320,1377,320C1356.5,320,1336,320,1315,320C1293.9,320,1273,320,1252,320C1231.3,320,1210,320,1190,320C1168.7,320,1148,320,1127,320C1106.1,320,1085,320,1064,320C1043.5,320,1023,320,1002,320C980.9,320,960,320,939,320C918.3,320,897,320,877,320C855.7,320,835,320,814,320C793,320,772,320,751,320C730.4,320,710,320,689,320C667.8,320,647,320,626,320C605.2,320,584,320,563,320C542.6,320,522,320,501,320C480,320,459,320,438,320C417.4,320,397,320,376,320C354.8,320,334,320,313,320C292.2,320,271,320,250,320C229.6,320,209,320,188,320C167,320,146,320,125,320C104.3,320,83,320,63,320C41.7,320,21,320,10,320L0,320Z"></path></svg>
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务软件</p>
|
||||
</footer>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>法律术语词典</title>
|
||||
<link rel="stylesheet" href="styles1.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>法律术语词典</h1>
|
||||
<a href="index.html">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>查询和解释法律术语</h2>
|
||||
<p>在这里，您可以输入您想查询的法律术语，我们将提供相关的术语解释</p>
|
||||
<input type="text" id="consultation-input" placeholder="输入相关案件...">
|
||||
<button onclick="consultationFunction()">提交咨询</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务系统</p>
|
||||
</footer>
|
||||
<!-- SVG Background -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>法律新闻订阅</title>
|
||||
<link rel="stylesheet" href="styles1.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>法律新闻订阅</h1>
|
||||
<a href="index.html">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>订阅您感兴趣的法律新闻</h2>
|
||||
<p>在这里，您可以输入您感兴趣的法律新闻，我们将提供相关的新闻推荐</p>
|
||||
<input type="text" id="consultation-input" placeholder="输入相关案件...">
|
||||
<button onclick="consultationFunction()">提交咨询</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务系统</p>
|
||||
</footer>
|
||||
<!-- SVG Background -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>个性化学习计划</title>
|
||||
<link rel="stylesheet" href="styles1.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>个性化学习计划</h1>
|
||||
<a href="index.html">返回首页</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<h2>根据您的需求推荐学习资源</h2>
|
||||
<p>在这里，您可以输入您感兴趣的学习资源，我们将提供相关的学习推荐</p>
|
||||
<input type="text" id="consultation-input" placeholder="输入相关案件...">
|
||||
<button onclick="consultationFunction()">提交咨询</button>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© 2024 智能法律服务系统</p>
|
||||
</footer>
|
||||
<!-- SVG Background -->
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,206 @@
|
||||
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
@ -0,0 +1,476 @@
|
||||
/* 基本重置 */
|
||||
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