21d2a8fe56
This commit completely overhauls the visual theme of the page, shifting from the previous 'Luxury Elegant' style to a 'Neon Minimalist' futuristic aesthetic. Key changes include: - Theme: Replaced the gold and dark blue palette with a vibrant neon color scheme. - Typography: Swapped elegant serif fonts for futuristic sans-serif fonts (Orbitron, Rajdhani). - Background: Replaced floating particles with a static neon grid and pulsing circles. - Components: Redesigned all UI elements, including cards, buttons, and dividers, to align with the new neon style. - Interactivity: Reworked the theme switcher logic and added new interactive button effects.
700 lines
23 KiB
HTML
700 lines
23 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>霓虹极简 - 未来主义网页设计</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
:root {
|
|
--neon-blue: #00f3ff;
|
|
--neon-pink: #ff00ff;
|
|
--neon-purple: #bd00ff;
|
|
--neon-green: #39ff14;
|
|
--dark-bg: #0a0a12;
|
|
--dark-card: #12121f;
|
|
--light-text: #e6e6ff;
|
|
--transition: all 0.3s ease;
|
|
}
|
|
|
|
body {
|
|
background: var(--dark-bg);
|
|
color: var(--light-text);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
line-height: 1.6;
|
|
overflow-x: hidden;
|
|
position: relative;
|
|
font-family: 'Rajdhani', sans-serif;
|
|
}
|
|
|
|
/* 霓虹网格背景 */
|
|
.neon-grid {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -3;
|
|
overflow: hidden;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.grid-line {
|
|
position: absolute;
|
|
background: rgba(0, 243, 255, 0.1);
|
|
}
|
|
|
|
.horizontal {
|
|
width: 100%;
|
|
height: 1px;
|
|
}
|
|
|
|
.vertical {
|
|
width: 1px;
|
|
height: 100%;
|
|
}
|
|
|
|
/* 霓虹灯效果装饰 */
|
|
.neon-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
border: 2px solid var(--neon-blue);
|
|
box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
|
|
opacity: 0.1;
|
|
animation: pulse 6s infinite alternate;
|
|
}
|
|
|
|
.circle-1 {
|
|
width: 300px;
|
|
height: 300px;
|
|
top: -100px;
|
|
left: -100px;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.circle-2 {
|
|
width: 200px;
|
|
height: 200px;
|
|
bottom: -50px;
|
|
right: -50px;
|
|
animation-delay: -2s;
|
|
border-color: var(--neon-pink);
|
|
box-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% { opacity: 0.05; transform: scale(0.95); }
|
|
100% { opacity: 0.2; transform: scale(1.05); }
|
|
}
|
|
|
|
.container {
|
|
max-width: 1100px;
|
|
width: 100%;
|
|
background: rgba(18, 18, 31, 0.8);
|
|
border-radius: 16px;
|
|
box-shadow:
|
|
0 0 0 1px rgba(0, 243, 255, 0.1),
|
|
0 0 30px rgba(0, 243, 255, 0.1);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(0, 243, 255, 0.2);
|
|
overflow: hidden;
|
|
text-align: center;
|
|
padding: 50px 40px;
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
.neon-border {
|
|
position: absolute;
|
|
top: 10px;
|
|
left: 10px;
|
|
right: 10px;
|
|
bottom: 10px;
|
|
border: 1px solid rgba(0, 243, 255, 0.3);
|
|
border-radius: 12px;
|
|
pointer-events: none;
|
|
box-shadow: 0 0 15px rgba(0, 243, 255, 0.2);
|
|
animation: borderGlow 3s infinite alternate;
|
|
}
|
|
|
|
@keyframes borderGlow {
|
|
0% { box-shadow: 0 0 15px rgba(0, 243, 255, 0.2); }
|
|
100% { box-shadow: 0 0 25px rgba(0, 243, 255, 0.4), 0 0 40px rgba(0, 243, 255, 0.1); }
|
|
}
|
|
|
|
h1 {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 4rem;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
color: var(--neon-blue);
|
|
text-shadow: 0 0 10px var(--neon-blue);
|
|
letter-spacing: 2px;
|
|
position: relative;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.5rem;
|
|
color: var(--light-text);
|
|
margin-bottom: 40px;
|
|
font-weight: 300;
|
|
letter-spacing: 3px;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.divider {
|
|
height: 2px;
|
|
width: 200px;
|
|
background: linear-gradient(to right, transparent, var(--neon-blue), transparent);
|
|
margin: 0 auto 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.divider::before, .divider::after {
|
|
content: '◆';
|
|
position: absolute;
|
|
top: -10px;
|
|
color: var(--neon-blue);
|
|
font-size: 20px;
|
|
}
|
|
|
|
.divider::before {
|
|
left: 0;
|
|
}
|
|
|
|
.divider::after {
|
|
right: 0;
|
|
}
|
|
|
|
.content-box {
|
|
background: rgba(0, 243, 255, 0.05);
|
|
border-radius: 12px;
|
|
padding: 30px;
|
|
margin: 40px 0;
|
|
border: 1px solid rgba(0, 243, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.content-box:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 5px 20px rgba(0, 243, 255, 0.2);
|
|
}
|
|
|
|
.original-text {
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 2.5rem;
|
|
font-weight: 500;
|
|
padding: 25px 40px;
|
|
background: rgba(0, 0, 0, 0.3);
|
|
border-radius: 8px;
|
|
display: inline-block;
|
|
margin: 30px 0;
|
|
border: 1px solid var(--neon-pink);
|
|
box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
|
|
position: relative;
|
|
transition: var(--transition);
|
|
cursor: pointer;
|
|
color: var(--neon-pink);
|
|
text-shadow: 0 0 8px var(--neon-pink);
|
|
}
|
|
|
|
.original-text:hover {
|
|
transform: scale(1.03);
|
|
box-shadow: 0 0 25px rgba(255, 0, 255, 0.5);
|
|
}
|
|
|
|
.quote-icon {
|
|
font-size: 1.8rem;
|
|
margin: 0 15px;
|
|
color: var(--neon-pink);
|
|
vertical-align: middle;
|
|
text-shadow: 0 0 8px var(--neon-pink);
|
|
}
|
|
|
|
.features {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
gap: 25px;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.feature {
|
|
background: rgba(18, 18, 31, 0.9);
|
|
padding: 30px 25px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
|
|
transition: var(--transition);
|
|
border: 1px solid rgba(0, 243, 255, 0.1);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.feature::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 3px;
|
|
height: 100%;
|
|
background: linear-gradient(to bottom, var(--neon-blue), var(--neon-purple));
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.feature:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.feature:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 10px 25px rgba(0, 243, 255, 0.2);
|
|
}
|
|
|
|
.feature i {
|
|
font-size: 2.8rem;
|
|
margin-bottom: 20px;
|
|
color: var(--neon-blue);
|
|
text-shadow: 0 0 10px var(--neon-blue);
|
|
}
|
|
|
|
.feature h3 {
|
|
font-size: 1.5rem;
|
|
margin-bottom: 15px;
|
|
color: var(--light-text);
|
|
font-family: 'Orbitron', sans-serif;
|
|
}
|
|
|
|
.feature p {
|
|
color: #a0a0cc;
|
|
font-size: 1.1rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.interactive-section {
|
|
margin: 40px 0;
|
|
padding: 30px;
|
|
background: rgba(18, 18, 31, 0.9);
|
|
border-radius: 12px;
|
|
border: 1px solid rgba(0, 243, 255, 0.1);
|
|
position: relative;
|
|
}
|
|
|
|
.interactive-section::before {
|
|
content: '◆ ◆ ◆';
|
|
position: absolute;
|
|
top: -15px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
color: var(--neon-blue);
|
|
font-size: 20px;
|
|
background: var(--dark-bg);
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.color-palette {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin: 25px 0;
|
|
}
|
|
|
|
.color-option {
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
overflow: hidden;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.color-option.active {
|
|
transform: scale(1.15);
|
|
border-color: var(--light-text);
|
|
box-shadow: 0 0 15px currentColor;
|
|
}
|
|
|
|
.color-option::after {
|
|
content: '✓';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: white;
|
|
font-size: 1.5rem;
|
|
opacity: 0;
|
|
transition: var(--transition);
|
|
}
|
|
|
|
.color-option.active::after {
|
|
opacity: 1;
|
|
}
|
|
|
|
.theme-1 { background: var(--neon-blue); }
|
|
.theme-2 { background: var(--neon-pink); }
|
|
.theme-3 { background: var(--neon-purple); }
|
|
.theme-4 { background: var(--neon-green); }
|
|
|
|
footer {
|
|
margin-top: 60px;
|
|
color: #a0a0cc;
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
position: relative;
|
|
}
|
|
|
|
footer::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: -30px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 200px;
|
|
height: 1px;
|
|
background: linear-gradient(to right, transparent, var(--neon-blue), transparent);
|
|
}
|
|
|
|
.social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 20px;
|
|
margin-top: 25px;
|
|
}
|
|
|
|
.social-links a {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 50px;
|
|
height: 50px;
|
|
border-radius: 50%;
|
|
background: rgba(18, 18, 31, 0.9);
|
|
color: var(--neon-blue);
|
|
font-size: 1.3rem;
|
|
transition: var(--transition);
|
|
position: relative;
|
|
overflow: hidden;
|
|
border: 1px solid rgba(0, 243, 255, 0.2);
|
|
}
|
|
|
|
.social-links a:hover {
|
|
color: var(--neon-pink);
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 0 15px rgba(255, 0, 255, 0.3);
|
|
border-color: rgba(255, 0, 255, 0.3);
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 1200px) {
|
|
h1 {
|
|
font-size: 3.5rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2.2rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 992px) {
|
|
h1 {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.3rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 2rem;
|
|
padding: 20px 30px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding: 40px 25px;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.original-text {
|
|
font-size: 1.8rem;
|
|
padding: 15px 25px;
|
|
}
|
|
|
|
.features {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.color-option {
|
|
width: 45px;
|
|
height: 45px;
|
|
}
|
|
|
|
.social-links a {
|
|
width: 45px;
|
|
height: 45px;
|
|
font-size: 1.2rem;
|
|
}
|
|
}
|
|
|
|
/* 霓虹文字效果 */
|
|
.neon-text {
|
|
text-shadow:
|
|
0 0 5px currentColor,
|
|
0 0 10px currentColor,
|
|
0 0 20px currentColor,
|
|
0 0 40px currentColor;
|
|
}
|
|
|
|
/* 霓虹按钮效果 */
|
|
.neon-btn {
|
|
display: inline-block;
|
|
padding: 12px 30px;
|
|
margin: 20px 10px;
|
|
background: transparent;
|
|
color: var(--neon-blue);
|
|
border: 2px solid var(--neon-blue);
|
|
border-radius: 30px;
|
|
font-family: 'Orbitron', sans-serif;
|
|
font-size: 1.1rem;
|
|
text-transform: uppercase;
|
|
letter-spacing: 2px;
|
|
cursor: pointer;
|
|
transition: var(--transition);
|
|
box-shadow:
|
|
0 0 10px rgba(0, 243, 255, 0.3),
|
|
inset 0 0 10px rgba(0, 243, 255, 0.1);
|
|
text-shadow: 0 0 5px var(--neon-blue);
|
|
}
|
|
|
|
.neon-btn:hover {
|
|
background: var(--neon-blue);
|
|
color: var(--dark-bg);
|
|
box-shadow:
|
|
0 0 20px var(--neon-blue),
|
|
0 0 40px var(--neon-blue),
|
|
inset 0 0 20px rgba(255, 255, 255, 0.3);
|
|
text-shadow: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<!-- 霓虹网格背景 -->
|
|
<div class="neon-grid"></div>
|
|
|
|
<!-- 霓虹圆圈装饰 -->
|
|
<div class="neon-circle circle-1"></div>
|
|
<div class="neon-circle circle-2"></div>
|
|
|
|
<div class="container">
|
|
<div class="neon-border"></div>
|
|
|
|
<h1 class="neon-text" style="color: var(--neon-blue)">霓虹极简</h1>
|
|
<p class="subtitle">未来主义美学与简约设计的完美融合</p>
|
|
|
|
<div class="divider"></div>
|
|
|
|
<div class="content-box">
|
|
<p>原始内容被赋予未来感：</p>
|
|
<div class="original-text neon-text">
|
|
<i class="fas fa-quote-left quote-icon"></i> 啥都没有 <i class="fas fa-quote-right quote-icon"></i>
|
|
</div>
|
|
<p>在数字时代，极简主义获得了新的表达形式</p>
|
|
</div>
|
|
|
|
<div class="features">
|
|
<div class="feature">
|
|
<i class="fas fa-microchip"></i>
|
|
<h3>科技美学</h3>
|
|
<p>融合赛博朋克元素与未来主义设计语言，创造数字时代的视觉体验</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-lightbulb"></i>
|
|
<h3>霓虹光影</h3>
|
|
<p>使用发光效果和鲜艳色彩，营造充满未来感的视觉氛围</p>
|
|
</div>
|
|
<div class="feature">
|
|
<i class="fas fa-code"></i>
|
|
<h3>数字简约</h3>
|
|
<p>在复杂的技术中寻找简约之美，创造清晰而有力的设计表达</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="interactive-section">
|
|
<h3>选择霓虹色彩</h3>
|
|
<div class="color-palette">
|
|
<div class="color-option theme-1 active" data-theme="blue"></div>
|
|
<div class="color-option theme-2" data-theme="pink"></div>
|
|
<div class="color-option theme-3" data-theme="purple"></div>
|
|
<div class="color-option theme-4" data-theme="green"></div>
|
|
</div>
|
|
<p>点击上方色块切换霓虹主题色彩</p>
|
|
|
|
<div class="neon-btn-container">
|
|
<button class="neon-btn">探索更多</button>
|
|
<button class="neon-btn" style="color: var(--neon-pink); border-color: var(--neon-pink); box-shadow: 0 0 10px rgba(255, 0, 255, 0.3), inset 0 0 10px rgba(255, 0, 255, 0.1); text-shadow: 0 0 5px var(--neon-pink);">了解更多</button>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="subtitle">简约是终极的复杂</p>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 霓虹极简美学 | 设计于数字时代，着眼于未来</p>
|
|
<div class="social-links">
|
|
<a href="#"><i class="fab fa-twitter"></i></a>
|
|
<a href="#"><i class="fab fa-instagram"></i></a>
|
|
<a href="#"><i class="fab fa-github"></i></a>
|
|
<a href="#"><i class="fab fa-linkedin"></i></a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 创建网格背景
|
|
function createGrid() {
|
|
const gridContainer = document.querySelector('.neon-grid');
|
|
|
|
// 创建水平线
|
|
for (let i = 0; i <= 100; i += 5) {
|
|
const line = document.createElement('div');
|
|
line.classList.add('grid-line', 'horizontal');
|
|
line.style.top = `${i}%`;
|
|
gridContainer.appendChild(line);
|
|
}
|
|
|
|
// 创建垂直线
|
|
for (let i = 0; i <= 100; i += 5) {
|
|
const line = document.createElement('div');
|
|
line.classList.add('grid-line', 'vertical');
|
|
line.style.left = `${i}%`;
|
|
gridContainer.appendChild(line);
|
|
}
|
|
}
|
|
|
|
// 主题切换功能
|
|
function setupThemeToggle() {
|
|
const colorOptions = document.querySelectorAll('.color-option');
|
|
|
|
colorOptions.forEach(option => {
|
|
option.addEventListener('click', function() {
|
|
// 移除所有active类
|
|
colorOptions.forEach(opt => opt.classList.remove('active'));
|
|
|
|
// 添加active类到当前选项
|
|
this.classList.add('active');
|
|
|
|
// 根据选择切换主题
|
|
const theme = this.getAttribute('data-theme');
|
|
changeTheme(theme);
|
|
});
|
|
});
|
|
}
|
|
|
|
// 切换主题函数
|
|
function changeTheme(theme) {
|
|
const root = document.documentElement;
|
|
const title = document.querySelector('h1');
|
|
const originalText = document.querySelector('.original-text');
|
|
const quoteIcons = document.querySelectorAll('.quote-icon');
|
|
const neonBtns = document.querySelectorAll('.neon-btn');
|
|
|
|
// 根据主题更新CSS变量
|
|
switch(theme) {
|
|
case 'pink':
|
|
root.style.setProperty('--neon-blue', '#ff00ff');
|
|
root.style.setProperty('--neon-pink', '#ff00ff');
|
|
root.style.setProperty('--neon-purple', '#ff00ff');
|
|
title.style.color = '#ff00ff';
|
|
originalText.style.color = '#ff00ff';
|
|
originalText.style.borderColor = '#ff00ff';
|
|
originalText.style.boxShadow = '0 0 15px rgba(255, 0, 255, 0.3)';
|
|
quoteIcons.forEach(icon => icon.style.color = '#ff00ff');
|
|
quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #ff00ff');
|
|
break;
|
|
case 'purple':
|
|
root.style.setProperty('--neon-blue', '#bd00ff');
|
|
root.style.setProperty('--neon-pink', '#bd00ff');
|
|
root.style.setProperty('--neon-purple', '#bd00ff');
|
|
title.style.color = '#bd00ff';
|
|
originalText.style.color = '#bd00ff';
|
|
originalText.style.borderColor = '#bd00ff';
|
|
originalText.style.boxShadow = '0 0 15px rgba(189, 0, 255, 0.3)';
|
|
quoteIcons.forEach(icon => icon.style.color = '#bd00ff');
|
|
quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #bd00ff');
|
|
break;
|
|
case 'green':
|
|
root.style.setProperty('--neon-blue', '#39ff14');
|
|
root.style.setProperty('--neon-pink', '#39ff14');
|
|
root.style.setProperty('--neon-purple', '#39ff14');
|
|
title.style.color = '#39ff14';
|
|
originalText.style.color = '#39ff14';
|
|
originalText.style.borderColor = '#39ff14';
|
|
originalText.style.boxShadow = '0 0 15px rgba(57, 255, 20, 0.3)';
|
|
quoteIcons.forEach(icon => icon.style.color = '#39ff14');
|
|
quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #39ff14');
|
|
break;
|
|
default:
|
|
root.style.setProperty('--neon-blue', '#00f3ff');
|
|
root.style.setProperty('--neon-pink', '#ff00ff');
|
|
root.style.setProperty('--neon-purple', '#bd00ff');
|
|
title.style.color = '#00f3ff';
|
|
originalText.style.color = '#ff00ff';
|
|
originalText.style.borderColor = '#ff00ff';
|
|
originalText.style.boxShadow = '0 0 15px rgba(255, 0, 255, 0.3)';
|
|
quoteIcons.forEach(icon => icon.style.color = '#ff00ff');
|
|
quoteIcons.forEach(icon => icon.style.textShadow = '0 0 8px #ff00ff');
|
|
}
|
|
}
|
|
|
|
// 初始化
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
createGrid();
|
|
setupThemeToggle();
|
|
|
|
// 为原始文本添加点击动画
|
|
const originalText = document.querySelector('.original-text');
|
|
originalText.addEventListener('click', function() {
|
|
this.style.transform = 'scale(1.05)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 300);
|
|
});
|
|
|
|
// 为按钮添加点击效果
|
|
const buttons = document.querySelectorAll('.neon-btn');
|
|
buttons.forEach(button => {
|
|
button.addEventListener('click', function() {
|
|
this.style.transform = 'scale(0.95)';
|
|
setTimeout(() => {
|
|
this.style.transform = 'scale(1)';
|
|
}, 300);
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |