源代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>能量启动</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
/>
<style>
/* General Styles */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1a1a1a;
margin: 0;
flex-direction: column;
}
/* Power Button */
.power-btn {
width: 80px;
height: 80px;
border: none;
border-radius: 50%;
background: radial-gradient(circle, #ff6600 30%, #cc5500 60%);
box-shadow: 0 4px 8px rgba(255, 102, 0, 0.5),
inset 0 2px 6px rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: all 0.3s ease-in-out;
position: relative;
}
.power-btn:hover {
box-shadow: 0 0 10px rgba(255, 102, 0, 0.8);
transform: scale(1.05);
}
.power-btn.on {
background: radial-gradient(circle, #ff3300 30%, #cc2200 60%);
box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
}
/* Status Text */
.status {
margin-top: 10px;
font-size: 18px;
color: white;
font-family: Arial, sans-serif;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
/* Lightbulbs */
.lightbulbs {
display: flex;
gap: 15px;
margin-top: 20px;
}
.lightbulb {
font-size: 40px;
color: gray;
opacity: 0.2;
transition: opacity 0.5s ease-in-out, transform 0.3s;
}
.lightbulb.on {
color: yellow;
opacity: 1;
text-shadow: 0 0 15px rgba(255, 255, 0, 0.7);
transform: scale(1.1);
}
/* Gear */
.gear-container {
margin-top: 20px;
}
.gear {
font-size: 50px;
color: silver;
opacity: 0.5;
transition: opacity 0.5s ease-in-out;
}
/* Battery */
.battery-container {
margin-top: 20px;
font-size: 35px;
}
.battery {
color: gray;
opacity: 0.5;
transition: opacity 0.5s ease-in-out, color 0.5s;
}
.battery.on {
color: green;
opacity: 1;
}
/* WiFi */
.wifi-container {
margin-top: 20px;
font-size: 35px;
}
.wifi {
color: black;
opacity: 0.5;
transition: opacity 0.5s ease-in-out, color 0.5s;
}
.wifi.connected {
color: lightblue;
opacity: 1;
animation: pulse 1s infinite alternate;
}
@keyframes pulse {
0% {
transform: scale(1);
}
100% {
transform: scale(1.1);
}
}
.atom-icon {
padding: 10px;
font-size: 50px;
color: gray;
opacity: 0.3;
transition: opacity 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
}
.atom-icon.active {
color: cyan;
opacity: 1;
text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
animation: spinAtom 3s linear infinite, glow 1.5s alternate infinite;
}
#screen-flicker {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
opacity: 0;
visibility: hidden;
z-index: 100;
transition: opacity 0.2s ease-in-out;
}
#screen-flicker.active {
visibility: visible;
animation: flicker 1s ease-in-out;
}
@keyframes flicker {
0% {
opacity: 1;
}
25% {
opacity: 0.7;
}
50% {
opacity: 1;
}
75% {
opacity: 0.5;
}
100% {
opacity: 0;
}
}
body.power-on {
animation: pulseGlow 3s infinite alternate;
}
@keyframes pulseGlow {
0% {
background-color: #1a1a1a;
}
100% {
background-color: #242424;
}
}
/* Fan Container */
.fan-container {
display: flex;
justify-content: center;
gap: 20px;
margin-bottom: 15px; /* Spacing above the atom */
}
/* Fans (default state) */
.fan-icon {
font-size: 50px;
color: gray;
opacity: 0.3;
transition: opacity 0.5s ease-in-out;
}
/* Fans Spin Animation */
.fan-icon.spinning {
opacity: 1;
color: silver;
animation: spinFan 2s linear infinite;
}
@keyframes spinFan {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<button id="powerButton" class="power-btn">
<i class="fa-solid fa-power-off"></i>
</button>
<div class="status" id="statusText">System On</div>
<div class="lightbulbs">
<i class="fa-regular fa-lightbulb lightbulb" id="lightbulb1"></i>
<i class="fa-regular fa-lightbulb lightbulb" id="lightbulb2"></i>
<i class="fa-regular fa-lightbulb lightbulb" id="lightbulb3"></i>
</div>
<div class="gear-container">
<i class="fa-solid fa-gear gear" id="gear"></i>
</div>
<div class="battery-container">
<i class="fa-solid fa-battery-empty battery" id="battery"></i>
</div>
<div class="fan-container">
<i class="fa-solid fa-fan fan-icon" id="fan1"></i>
<i class="fa-solid fa-fan fan-icon" id="fan2"></i>
</div>
<div class="atom-container">
<i class="fa-solid fa-atom atom-icon"></i>
</div>
<!-- partial -->
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script>
const powerButton = document.getElementById('powerButton');
const statusText = document.getElementById('statusText');
const lightbulbs = document.querySelectorAll('.lightbulb');
const gear = document.getElementById('gear');
const battery = document.getElementById('battery');
const wifi = document.getElementById('wifi');
const atomIcon = document.querySelector('.atom-icon');
const fans = document.querySelectorAll('.fan-icon');
const batteryLevels = [
'fa-battery-empty',
'fa-battery-quarter',
'fa-battery-half',
'fa-battery-three-quarters',
'fa-battery-full',
];
// Atom activation
function activateAtom() {
atomIcon.classList.add('active');
gsap.to(atomIcon, { opacity: 1, duration: 0.5 });
}
function deactivateAtom() {
gsap.to(atomIcon, { opacity: 0.3, duration: 0.5 }); // Fade out smoothly
setTimeout(() => {
atomIcon.classList.remove('active');
gsap.killTweensOf(atomIcon); // Stop animation
}, 500); // Delay before fully stopping the atom
}
// Lightbulbs
function turnOnLightbulbs() {
lightbulbs.forEach((bulb, index) => {
setTimeout(() => {
bulb.classList.add('on');
}, index * 250);
});
}
function turnOffLightbulbs() {
lightbulbs.forEach((bulb, index) => {
setTimeout(() => {
bulb.classList.remove('on');
}, index * 250);
});
}
// Gear
function startGear() {
gsap.to(gear, {
opacity: 1,
rotation: 360,
duration: 2,
repeat: -1,
ease: 'linear',
});
}
function stopGear() {
gsap.to(gear, { opacity: 0.5, duration: 0.5 }); // Fade out first
setTimeout(() => {
gsap.killTweensOf(gear); // Stop animation
gsap.set(gear, { rotation: 0 }); // Reset rotation
}, 500);
}
// Battery
function chargeBattery() {
battery.classList.add('on');
let level = 0;
function nextChargeStep() {
if (level < batteryLevels.length) {
battery.classList.remove(...batteryLevels);
battery.classList.add(batteryLevels[level]);
level++;
setTimeout(nextChargeStep, 600);
}
}
nextChargeStep();
}
function drainBattery() {
setTimeout(() => {
battery.classList.remove('on', ...batteryLevels);
battery.classList.add('fa-battery-empty');
}, 800); // Battery drains after 0.8s
}
// Fans
function startFans() {
fans.forEach((fan) => fan.classList.add('spinning'));
}
function stopFans() {
setTimeout(() => {
fans.forEach((fan) => fan.classList.remove('spinning'));
}, 1000); // Fans stop after 1s for a gradual effect
}
// Background Pulse
function enableBackgroundPulse() {
document.body.classList.add('power-on');
}
function disableBackgroundPulse() {
setTimeout(() => {
document.body.classList.remove('power-on');
}, 1200); // Background pulse stops last
}
// Unified Power Button Event Listener
powerButton.addEventListener('click', function () {
if (this.classList.contains('on')) {
// Powering OFF
this.classList.remove('on');
gsap.to(this, { scale: 1, duration: 0.2 });
gsap.to(this, {
boxShadow: '0 0 10px rgba(255, 102, 0, 0.5)',
duration: 0.5,
});
gsap.to(statusText, { opacity: 0, duration: 0.5 });
// Delayed Shutdown Sequence
setTimeout(turnOffLightbulbs, 500);
setTimeout(drainBattery, 1000);
setTimeout(stopGear, 1200);
setTimeout(deactivateAtom, 1400);
setTimeout(stopFans, 1600);
setTimeout(disableBackgroundPulse, 1800);
} else {
// Powering ON
this.classList.add('on');
gsap.to(this, { scale: 1.08, duration: 0.5, yoyo: true, repeat: 1 });
gsap.to(this, {
boxShadow: '0 0 20px rgba(255, 102, 0, 0.8)',
duration: 1,
});
gsap.to(statusText, { opacity: 1, duration: 1 });
// Delayed Startup Sequence
setTimeout(enableBackgroundPulse, 100);
setTimeout(turnOnLightbulbs, 500);
setTimeout(chargeBattery, 800);
setTimeout(startGear, 1200);
setTimeout(activateAtom, 1400);
setTimeout(startFans, 1600);
}
});
</script>
</body>
</html>
