官方微信 手机客户端访问推广帮助
登录 注册

3BBS»首页 › 教程分享 › 代码特效 › 能量启动（可复制源代码）

能量启动（可复制源代码）

[复制链接]
七夏（UID：1） 发表于 2025-2-8 08:41:20 | 显示全部楼层 |阅读模式

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

×

图片

源代码

<!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>
gt, lt, opacity

相关帖子

小时候，看腻了农村的牛和马，长大后，来到了城里，才知道原来到处都是牛马！
回复

使用道具 举报

全部回复0 显示全部楼层
暂无回复，精彩从你开始！
发帖

快速回帖

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于楼主

七夏 Lv.10
管理员

  • 主题

    1000

  • 回答

    409

  • 积分

    2719
虚位以待，此位置招租

商务推广

    此位置招租 黑粉猫影院-免费看电影 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租 此位置招租
最新热评 加载中...
  • 一个提供站长技术交流、疑问解答
  • 网站源码源码下载与网站建设教程
  • 交易信息发布、友链互换的综合论坛
站长交流
站长杂谈
主机交流
域名交流
悬赏问答
交易大厅
域名出售
网站交易
主机交易
友链交换
资源大厅
程序源码
模板主题
模块插件
软件工具
教程分享
美化教程
建站教程
代码特效
经验分享

官方微信

手机APP

Powered by Discuz! X3.5 Licensed Copyright © 2023-2025, Tencent Cloud.

鲁ICP备20023396号-7
手机版|小黑屋|加入Q群|随便看看|Archiver|