设为首页收藏本站

 找回密码
 立即注册
搜索
第柒论坛»论坛 › 源码专区 › 网页装饰代码 › 能量启动装饰代码

能量启动装饰代码

[复制链接]
发表于 2025-2-8 20:34:50 | 显示全部楼层 |阅读模式


  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <title>能量启动</title>
  6.     <link
  7.       rel="stylesheet"
  8.       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
  9.     />
  10.     <style>
  11.       /* General Styles */
  12.       body {
  13.         display: flex;
  14.         justify-content: center;
  15.         align-items: center;
  16.         height: 100vh;
  17.         background-color: #1a1a1a;
  18.         margin: 0;
  19.         flex-direction: column;
  20.       }

  22.       /* Power Button */
  23.       .power-btn {
  24.         width: 80px;
  25.         height: 80px;
  26.         border: none;
  27.         border-radius: 50%;
  28.         background: radial-gradient(circle, #ff6600 30%, #cc5500 60%);
  29.         box-shadow: 0 4px 8px rgba(255, 102, 0, 0.5),
  30.           inset 0 2px 6px rgba(0, 0, 0, 0.4);
  31.         display: flex;
  32.         justify-content: center;
  33.         align-items: center;
  34.         cursor: pointer;
  35.         transition: all 0.3s ease-in-out;
  36.         position: relative;
  37.       }

  39.       .power-btn:hover {
  40.         box-shadow: 0 0 10px rgba(255, 102, 0, 0.8);
  41.         transform: scale(1.05);
  42.       }

  44.       .power-btn.on {
  45.         background: radial-gradient(circle, #ff3300 30%, #cc2200 60%);
  46.         box-shadow: 0 0 20px rgba(255, 102, 0, 0.8);
  47.       }

  49.       /* Status Text */
  50.       .status {
  51.         margin-top: 10px;
  52.         font-size: 18px;
  53.         color: white;
  54.         font-family: Arial, sans-serif;
  55.         opacity: 0;
  56.         transition: opacity 0.5s ease-in-out;
  57.       }

  59.       /* Lightbulbs */
  60.       .lightbulbs {
  61.         display: flex;
  62.         gap: 15px;
  63.         margin-top: 20px;
  64.       }

  66.       .lightbulb {
  67.         font-size: 40px;
  68.         color: gray;
  69.         opacity: 0.2;
  70.         transition: opacity 0.5s ease-in-out, transform 0.3s;
  71.       }

  73.       .lightbulb.on {
  74.         color: yellow;
  75.         opacity: 1;
  76.         text-shadow: 0 0 15px rgba(255, 255, 0, 0.7);
  77.         transform: scale(1.1);
  78.       }

  80.       /* Gear */
  81.       .gear-container {
  82.         margin-top: 20px;
  83.       }

  85.       .gear {
  86.         font-size: 50px;
  87.         color: silver;
  88.         opacity: 0.5;
  89.         transition: opacity 0.5s ease-in-out;
  90.       }

  92.       /* Battery */
  93.       .battery-container {
  94.         margin-top: 20px;
  95.         font-size: 35px;
  96.       }

  98.       .battery {
  99.         color: gray;
  100.         opacity: 0.5;
  101.         transition: opacity 0.5s ease-in-out, color 0.5s;
  102.       }

  104.       .battery.on {
  105.         color: green;
  106.         opacity: 1;
  107.       }

  109.       /* WiFi */
  110.       .wifi-container {
  111.         margin-top: 20px;
  112.         font-size: 35px;
  113.       }

  115.       .wifi {
  116.         color: black;
  117.         opacity: 0.5;
  118.         transition: opacity 0.5s ease-in-out, color 0.5s;
  119.       }

  121.       .wifi.connected {
  122.         color: lightblue;
  123.         opacity: 1;
  124.         animation: pulse 1s infinite alternate;
  125.       }

  127.       @keyframes pulse {
  128.         0% {
  129.           transform: scale(1);
  130.         }
  131.         100% {
  132.           transform: scale(1.1);
  133.         }
  134.       }

  136.       .atom-icon {
  137.         padding: 10px;
  138.         font-size: 50px;
  139.         color: gray;
  140.         opacity: 0.3;
  141.         transition: opacity 0.5s ease-in-out, text-shadow 0.5s ease-in-out;
  142.       }

  144.       .atom-icon.active {
  145.         color: cyan;
  146.         opacity: 1;
  147.         text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
  148.         animation: spinAtom 3s linear infinite, glow 1.5s alternate infinite;
  149.       }

  151.       #screen-flicker {
  152.         position: fixed;
  153.         top: 0;
  154.         left: 0;
  155.         width: 100%;
  156.         height: 100%;
  157.         background: black;
  158.         opacity: 0;
  159.         visibility: hidden;
  160.         z-index: 100;
  161.         transition: opacity 0.2s ease-in-out;
  162.       }

  164.       #screen-flicker.active {
  165.         visibility: visible;
  166.         animation: flicker 1s ease-in-out;
  167.       }

  169.       @keyframes flicker {
  170.         0% {
  171.           opacity: 1;
  172.         }
  173.         25% {
  174.           opacity: 0.7;
  175.         }
  176.         50% {
  177.           opacity: 1;
  178.         }
  179.         75% {
  180.           opacity: 0.5;
  181.         }
  182.         100% {
  183.           opacity: 0;
  184.         }
  185.       }

  187.       body.power-on {
  188.         animation: pulseGlow 3s infinite alternate;
  189.       }

  191.       @keyframes pulseGlow {
  192.         0% {
  193.           background-color: #1a1a1a;
  194.         }
  195.         100% {
  196.           background-color: #242424;
  197.         }
  198.       }

  200.       /* Fan Container */
  201.       .fan-container {
  202.         display: flex;
  203.         justify-content: center;
  204.         gap: 20px;
  205.         margin-bottom: 15px; /* Spacing above the atom */
  206.       }

  208.       /* Fans (default state) */
  209.       .fan-icon {
  210.         font-size: 50px;
  211.         color: gray;
  212.         opacity: 0.3;
  213.         transition: opacity 0.5s ease-in-out;
  214.       }

  216.       /* Fans Spin Animation */
  217.       .fan-icon.spinning {
  218.         opacity: 1;
  219.         color: silver;
  220.         animation: spinFan 2s linear infinite;
  221.       }

  223.       @keyframes spinFan {
  224.         0% {
  225.           transform: rotate(0deg);
  226.         }
  227.         100% {
  228.           transform: rotate(360deg);
  229.         }
  230.       }
  231.     </style>
  232.   </head>
  233.   <body>
  234.     <!-- partial:index.partial.html -->
  235.     <button id="powerButton" class="power-btn">
  236.       <i class="fa-solid fa-power-off"></i>
  237.     </button>

  239.     <div class="status" id="statusText">System On</div>

  241.     <div class="lightbulbs">
  242.       <i class="fa-regular fa-lightbulb lightbulb" id="lightbulb1"></i>
  243.       <i class="fa-regular fa-lightbulb lightbulb" id="lightbulb2"></i>
  244.       <i class="fa-regular fa-lightbulb lightbulb" id="lightbulb3"></i>
  245.     </div>

  247.     <div class="gear-container">
  248.       <i class="fa-solid fa-gear gear" id="gear"></i>
  249.     </div>

  251.     <div class="battery-container">
  252.       <i class="fa-solid fa-battery-empty battery" id="battery"></i>
  253.     </div>
  254.     <div class="fan-container">
  255.       <i class="fa-solid fa-fan fan-icon" id="fan1"></i>
  256.       <i class="fa-solid fa-fan fan-icon" id="fan2"></i>
  257.     </div>
  258.     <div class="atom-container">
  259.       <i class="fa-solid fa-atom atom-icon"></i>
  260.     </div>
  261.     <!-- partial -->
  262.     <script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
  263.     <script>
  264.       const powerButton = document.getElementById('powerButton');
  265.       const statusText = document.getElementById('statusText');
  266.       const lightbulbs = document.querySelectorAll('.lightbulb');
  267.       const gear = document.getElementById('gear');
  268.       const battery = document.getElementById('battery');
  269.       const wifi = document.getElementById('wifi');
  270.       const atomIcon = document.querySelector('.atom-icon');
  271.       const fans = document.querySelectorAll('.fan-icon');

  273.       const batteryLevels = [
  274.         'fa-battery-empty',
  275.         'fa-battery-quarter',
  276.         'fa-battery-half',
  277.         'fa-battery-three-quarters',
  278.         'fa-battery-full',
  279.       ];

  281.       // Atom activation
  282.       function activateAtom() {
  283.         atomIcon.classList.add('active');
  284.         gsap.to(atomIcon, { opacity: 1, duration: 0.5 });
  285.       }

  287.       function deactivateAtom() {
  288.         gsap.to(atomIcon, { opacity: 0.3, duration: 0.5 }); // Fade out smoothly
  289.         setTimeout(() => {
  290.           atomIcon.classList.remove('active');
  291.           gsap.killTweensOf(atomIcon); // Stop animation
  292.         }, 500); // Delay before fully stopping the atom
  293.       }

  295.       // Lightbulbs
  296.       function turnOnLightbulbs() {
  297.         lightbulbs.forEach((bulb, index) => {
  298.           setTimeout(() => {
  299.             bulb.classList.add('on');
  300.           }, index * 250);
  301.         });
  302.       }

  304.       function turnOffLightbulbs() {
  305.         lightbulbs.forEach((bulb, index) => {
  306.           setTimeout(() => {
  307.             bulb.classList.remove('on');
  308.           }, index * 250);
  309.         });
  310.       }

  312.       // Gear
  313.       function startGear() {
  314.         gsap.to(gear, {
  315.           opacity: 1,
  316.           rotation: 360,
  317.           duration: 2,
  318.           repeat: -1,
  319.           ease: 'linear',
  320.         });
  321.       }

  323.       function stopGear() {
  324.         gsap.to(gear, { opacity: 0.5, duration: 0.5 }); // Fade out first
  325.         setTimeout(() => {
  326.           gsap.killTweensOf(gear); // Stop animation
  327.           gsap.set(gear, { rotation: 0 }); // Reset rotation
  328.         }, 500);
  329.       }

  331.       // Battery
  332.       function chargeBattery() {
  333.         battery.classList.add('on');
  334.         let level = 0;
  335.         function nextChargeStep() {
  336.           if (level < batteryLevels.length) {
  337.             battery.classList.remove(...batteryLevels);
  338.             battery.classList.add(batteryLevels[level]);
  339.             level++;
  340.             setTimeout(nextChargeStep, 600);
  341.           }
  342.         }
  343.         nextChargeStep();
  344.       }

  346.       function drainBattery() {
  347.         setTimeout(() => {
  348.           battery.classList.remove('on', ...batteryLevels);
  349.           battery.classList.add('fa-battery-empty');
  350.         }, 800); // Battery drains after 0.8s
  351.       }

  353.       // Fans
  354.       function startFans() {
  355.         fans.forEach((fan) => fan.classList.add('spinning'));
  356.       }

  358.       function stopFans() {
  359.         setTimeout(() => {
  360.           fans.forEach((fan) => fan.classList.remove('spinning'));
  361.         }, 1000); // Fans stop after 1s for a gradual effect
  362.       }

  364.       // Background Pulse
  365.       function enableBackgroundPulse() {
  366.         document.body.classList.add('power-on');
  367.       }

  369.       function disableBackgroundPulse() {
  370.         setTimeout(() => {
  371.           document.body.classList.remove('power-on');
  372.         }, 1200); // Background pulse stops last
  373.       }

  375.       // Unified Power Button Event Listener
  376.       powerButton.addEventListener('click', function () {
  377.         if (this.classList.contains('on')) {
  378.           // Powering OFF
  379.           this.classList.remove('on');
  380.           gsap.to(this, { scale: 1, duration: 0.2 });
  381.           gsap.to(this, {
  382.             boxShadow: '0 0 10px rgba(255, 102, 0, 0.5)',
  383.             duration: 0.5,
  384.           });
  385.           gsap.to(statusText, { opacity: 0, duration: 0.5 });

  387.           // Delayed Shutdown Sequence
  388.           setTimeout(turnOffLightbulbs, 500);
  389.           setTimeout(drainBattery, 1000);
  390.           setTimeout(stopGear, 1200);
  391.           setTimeout(deactivateAtom, 1400);
  392.           setTimeout(stopFans, 1600);
  393.           setTimeout(disableBackgroundPulse, 1800);
  394.         } else {
  395.           // Powering ON
  396.           this.classList.add('on');
  397.           gsap.to(this, { scale: 1.08, duration: 0.5, yoyo: true, repeat: 1 });
  398.           gsap.to(this, {
  399.             boxShadow: '0 0 20px rgba(255, 102, 0, 0.8)',
  400.             duration: 1,
  401.           });
  402.           gsap.to(statusText, { opacity: 1, duration: 1 });

  404.           // Delayed Startup Sequence
  405.           setTimeout(enableBackgroundPulse, 100);
  406.           setTimeout(turnOnLightbulbs, 500);
  407.           setTimeout(chargeBattery, 800);
  408.           setTimeout(startGear, 1200);
  409.           setTimeout(activateAtom, 1400);
  410.           setTimeout(startFans, 1600);
  411.         }
  412.       });
  413.     </script>
  414.   </body>
  415. </html>
复制代码


免责声明: 本站部分文章来自互联网收集，仅供用于学习和交流/测试，请遵循相关法律法规，本站一切资源不代表第柒论坛立场，如有侵权/违规/后门/不妥请联系本站管理员删除。敬请谅解！侵删请致信E-mail：ailm@hlye.cn
回复

使用道具 举报

返回列表 发新帖 回复
懒得打字嘛，点击右侧快捷回复 【右侧内容，后台自定义】
高级模式
B Color Image Link Quote Code Smilies |上传

本版积分规则

快速回复 返回顶部 返回列表