添加酷炫背景
This commit is contained in:
parent
6283ea4afd
commit
4be77b6636
BIN
__pycache__/config.cpython-311.pyc
Normal file
BIN
__pycache__/config.cpython-311.pyc
Normal file
Binary file not shown.
199
static/css/particle-bg.css
Normal file
199
static/css/particle-bg.css
Normal file
@ -0,0 +1,199 @@
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
cursor: none; /* 隐藏默认光标 */
|
||||
}
|
||||
|
||||
/* 自定义光标 */
|
||||
.custom-cursor {
|
||||
position: fixed;
|
||||
width: auto;
|
||||
height: auto;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
|
||||
transition: transform 0.1s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(13, 110, 253, 0.2);
|
||||
padding: 3px 8px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* 左上角固定文字 */
|
||||
.corner-text {
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
left: 15px;
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 5px rgba(0, 123, 255, 0.7);
|
||||
z-index: 9998;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
background-color: rgba(13, 110, 253, 0.2);
|
||||
padding: 5px 10px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
backdrop-filter: blur(2px);
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
|
||||
.corner-text.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#particles-js {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
/* Adjust card styles for dark theme */
|
||||
.card {
|
||||
background-color: rgba(30, 30, 30, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
cursor: default; /* 在卡片上显示默认指针 */
|
||||
}
|
||||
|
||||
/* 鼠标悬停时的缩放效果 */
|
||||
.card:hover {
|
||||
transform: scale(1.03);
|
||||
box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
background-color: rgba(40, 40, 40, 0.8);
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
/* Adjust form elements for dark theme */
|
||||
.form-control {
|
||||
background-color: rgba(50, 50, 50, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
color: #fff;
|
||||
cursor: text; /* 在输入框上显示文本指针 */
|
||||
}
|
||||
|
||||
.form-control:focus {
|
||||
background-color: rgba(60, 60, 60, 0.8);
|
||||
color: #fff;
|
||||
border-color: rgba(0, 123, 255, 0.5);
|
||||
box-shadow: 0 0 0 0.25rem rgba(0, 123, 255, 0.25);
|
||||
}
|
||||
|
||||
.form-text {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
/* Adjust buttons for dark theme */
|
||||
.btn-primary {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0a58ca;
|
||||
transition: transform 0.2s ease;
|
||||
cursor: pointer; /* 在按钮上显示指针 */
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background-color: #198754;
|
||||
border-color: #146c43;
|
||||
transition: transform 0.2s ease;
|
||||
cursor: pointer; /* 在按钮上显示指针 */
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: #6c757d;
|
||||
border-color: #565e64;
|
||||
transition: transform 0.2s ease;
|
||||
cursor: pointer; /* 在按钮上显示指针 */
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
/* 表单元素的指针样式 */
|
||||
input[type="radio"],
|
||||
input[type="checkbox"],
|
||||
label {
|
||||
cursor: pointer; /* 在表单元素上显示指针 */
|
||||
}
|
||||
|
||||
/* Adjust text colors */
|
||||
h2, h4, h5 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
pre {
|
||||
color: #f0f0f0;
|
||||
background-color: rgba(40, 40, 40, 0.5);
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
/* Adjust form labels and radio buttons */
|
||||
.form-label, .form-check-label {
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.form-check-input:checked {
|
||||
background-color: #0d6efd;
|
||||
border-color: #0a58ca;
|
||||
}
|
||||
|
||||
/* Adjust alert messages */
|
||||
.alert {
|
||||
background-color: rgba(40, 40, 40, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background-color: rgba(25, 135, 84, 0.3);
|
||||
border-color: rgba(25, 135, 84, 0.5);
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
background-color: rgba(220, 53, 69, 0.3);
|
||||
border-color: rgba(220, 53, 69, 0.5);
|
||||
}
|
||||
|
||||
.alert-warning {
|
||||
background-color: rgba(255, 193, 7, 0.3);
|
||||
border-color: rgba(255, 193, 7, 0.5);
|
||||
color: #f0f0f0;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background-color: rgba(13, 202, 240, 0.3);
|
||||
border-color: rgba(13, 202, 240, 0.5);
|
||||
}
|
||||
86
static/js/cursor-effects.js
Normal file
86
static/js/cursor-effects.js
Normal file
@ -0,0 +1,86 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// 创建自定义光标元素
|
||||
const customCursor = document.createElement('div');
|
||||
customCursor.className = 'custom-cursor';
|
||||
customCursor.textContent = '尚美娱乐';
|
||||
document.body.appendChild(customCursor);
|
||||
|
||||
// 创建左上角固定文字元素
|
||||
const cornerText = document.createElement('div');
|
||||
cornerText.className = 'corner-text';
|
||||
cornerText.textContent = '尚美娱乐';
|
||||
document.body.appendChild(cornerText);
|
||||
|
||||
// 获取所有卡片元素
|
||||
const cards = document.querySelectorAll('.card');
|
||||
|
||||
// 鼠标移动时的位置变量
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let cursorX = 0;
|
||||
let cursorY = 0;
|
||||
|
||||
// 平滑跟随效果
|
||||
function animate() {
|
||||
// 平滑跟随效果，使光标移动更自然
|
||||
const distX = mouseX - cursorX;
|
||||
const distY = mouseY - cursorY;
|
||||
|
||||
cursorX += distX * 0.2;
|
||||
cursorY += distY * 0.2;
|
||||
|
||||
customCursor.style.left = cursorX + 'px';
|
||||
customCursor.style.top = cursorY + 'px';
|
||||
|
||||
requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
// 启动动画
|
||||
animate();
|
||||
|
||||
// 鼠标移动时更新位置变量
|
||||
document.addEventListener('mousemove', function(e) {
|
||||
mouseX = e.clientX + 15;
|
||||
mouseY = e.clientY + 15;
|
||||
|
||||
// 添加轻微的缩放效果
|
||||
const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
|
||||
customCursor.style.transform = `scale(${scale})`;
|
||||
});
|
||||
|
||||
// 为所有可交互元素添加鼠标进入事件
|
||||
const interactiveElements = document.querySelectorAll('.card, .btn, input, label, a, select, textarea');
|
||||
|
||||
interactiveElements.forEach(element => {
|
||||
element.addEventListener('mouseenter', function() {
|
||||
// 鼠标进入可交互元素时，将自定义光标透明度设为很低（不是完全隐藏），显示左上角文字
|
||||
customCursor.style.opacity = '0.01'; // 几乎不可见但仍然存在
|
||||
cornerText.classList.add('visible');
|
||||
});
|
||||
|
||||
element.addEventListener('mouseleave', function() {
|
||||
// 鼠标离开可交互元素时，显示自定义光标，隐藏左上角文字
|
||||
customCursor.style.opacity = '1';
|
||||
cornerText.classList.remove('visible');
|
||||
});
|
||||
});
|
||||
|
||||
// 鼠标点击效果
|
||||
document.addEventListener('click', function() {
|
||||
// 点击时添加缩放动画
|
||||
customCursor.style.transform = 'scale(0.8)';
|
||||
setTimeout(() => {
|
||||
const scale = 1 + Math.sin(Date.now() * 0.003) * 0.1;
|
||||
customCursor.style.transform = `scale(${scale})`;
|
||||
}, 100);
|
||||
});
|
||||
|
||||
// 初始状态：显示自定义光标，隐藏左上角文字
|
||||
customCursor.style.opacity = '1';
|
||||
cornerText.classList.remove('visible');
|
||||
|
||||
// 防止在页面加载时出现闪烁
|
||||
setTimeout(() => {
|
||||
customCursor.style.transition = 'opacity 0.3s ease, transform 0.1s ease';
|
||||
}, 100);
|
||||
});
|
||||
105
static/js/particles-config.js
Normal file
105
static/js/particles-config.js
Normal file
@ -0,0 +1,105 @@
|
||||
particlesJS('particles-js', {
|
||||
"particles": {
|
||||
"number": {
|
||||
"value": 80,
|
||||
"density": {
|
||||
"enable": true,
|
||||
"value_area": 800
|
||||
}
|
||||
},
|
||||
"color": {
|
||||
"value": "#ffffff"
|
||||
},
|
||||
"shape": {
|
||||
"type": "circle",
|
||||
"stroke": {
|
||||
"width": 0,
|
||||
"color": "#000000"
|
||||
},
|
||||
"polygon": {
|
||||
"nb_sides": 5
|
||||
}
|
||||
},
|
||||
"opacity": {
|
||||
"value": 0.5,
|
||||
"random": false,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 1,
|
||||
"opacity_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"size": {
|
||||
"value": 3,
|
||||
"random": true,
|
||||
"anim": {
|
||||
"enable": false,
|
||||
"speed": 40,
|
||||
"size_min": 0.1,
|
||||
"sync": false
|
||||
}
|
||||
},
|
||||
"line_linked": {
|
||||
"enable": true,
|
||||
"distance": 150,
|
||||
"color": "#3498db",
|
||||
"opacity": 0.4,
|
||||
"width": 1
|
||||
},
|
||||
"move": {
|
||||
"enable": true,
|
||||
"speed": 2,
|
||||
"direction": "none",
|
||||
"random": false,
|
||||
"straight": false,
|
||||
"out_mode": "out",
|
||||
"bounce": false,
|
||||
"attract": {
|
||||
"enable": false,
|
||||
"rotateX": 600,
|
||||
"rotateY": 1200
|
||||
}
|
||||
}
|
||||
},
|
||||
"interactivity": {
|
||||
"detect_on": "canvas",
|
||||
"events": {
|
||||
"onhover": {
|
||||
"enable": true,
|
||||
"mode": "grab"
|
||||
},
|
||||
"onclick": {
|
||||
"enable": true,
|
||||
"mode": "push"
|
||||
},
|
||||
"resize": true
|
||||
},
|
||||
"modes": {
|
||||
"grab": {
|
||||
"distance": 140,
|
||||
"line_linked": {
|
||||
"opacity": 1
|
||||
}
|
||||
},
|
||||
"bubble": {
|
||||
"distance": 400,
|
||||
"size": 40,
|
||||
"duration": 2,
|
||||
"opacity": 8,
|
||||
"speed": 3
|
||||
},
|
||||
"repulse": {
|
||||
"distance": 200,
|
||||
"duration": 0.4
|
||||
},
|
||||
"push": {
|
||||
"particles_nb": 4
|
||||
},
|
||||
"remove": {
|
||||
"particles_nb": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"retina_detect": true
|
||||
});
|
||||
@ -4,8 +4,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>生成宣传内容</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Particles.js container -->
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
@ -58,6 +62,9 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
|
||||
<script>
|
||||
// 更新输入框标签
|
||||
document.querySelectorAll('input[name="name_type"]').forEach(radio => {
|
||||
|
||||
@ -4,8 +4,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>CDK兑换系统</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Particles.js container -->
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
@ -41,5 +45,8 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@ -4,8 +4,12 @@
|
||||
<meta charset="UTF-8">
|
||||
<title>CDK兑换</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="{{ url_for('static', filename='css/particle-bg.css') }}" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Particles.js container -->
|
||||
<div id="particles-js"></div>
|
||||
|
||||
<div class="container mt-5">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
@ -45,5 +49,8 @@
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/particles-config.js') }}"></script>
|
||||
<script src="{{ url_for('static', filename='js/cursor-effects.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user