新建会话
Ctrl
K
  • 网站
  • 文档
  • PPT
  • 表格
  • 深度研究
Kimi Code Kimi Claw
历史会话
查看手机应用
  • 关于我们
    • 探索月之暗面
    • 开放平台
    • 社会招聘
    • 校园招聘
    • 用户协议
    • 隐私协议
  • Language
  • 用户反馈

赛博朋克PPT封面

用html设计一张极具未来感和科技感的 PPT 封面。 整体风格：赛博朋克 + 高级科技展示，复杂精美但保持专业感。 视觉元素： 背景为深色（黑色/深蓝渐变），层叠的三维几何结构，搭配发光的霓虹线条与网格。 中心有一个抽象的“能量核心”或“数据光环”，由粒子流、光点和环形波纹组成，散发蓝紫色光芒。 周围点缀高科技 HUD 元素（半透明仪表盘、坐标网格、虚拟按钮、扫描线），带有动态感。 在远处加入星空、粒子雨或光束，增加空间纵深。 排版： 标题位于画面中心前景，采用未来感字体（粗体、发光描边，文字占位符：“PPIO派欧云”）。 副标题位于标题下方，较小字体，半透明背景条承载，文字占位符：“中国领先的独立分布式云计算服务商” 配色： 主色调：电光蓝 + 紫色霓虹 + 深空黑。 辅助色：青色、银白色，用于线条和粒子点缀。 规格：16:9 横屏，超高清分辨率，适合作为 PPT 封面，整体效果要酷炫、未来感、科技感十足。
前端交互式星空几何粒子动画实现效果
现在用户想要一个赛博朋克风格的PPT封面，要求科技感十足。我先分析一下用户的具体需求：深色背景、三维几何结构、霓虹线条、能量核心、HUD元素、星空粒子效果，还有特定的文字排版。
用户的需求挺明确的，就是要一个专业又酷炫的科技封面。我需要考虑怎么用HTML和CSS来实现这些效果。首先得规划整个页面的结构，应该有一个底层背景层，然后是几何结构层，中间是能量核心，上层是标题文字，最前面可以加扫描线效果。
配色方案就按用户说的，主色调用电光蓝#00f7ff和紫色#d16fff，背景用深蓝渐变#0a0a0a到#1a1a2e。字体要用Orbitron这种未来感强的，标题加发光效果。
我在思考怎么实现那个能量核心效果。可以用脉冲的圆形区域加上旋转的能量环，再加一些粒子动画。粒子可以用多个小圆点随机分布，然后做浮动动画。几何结构可以用CSS 3D变换来做一些旋转的多边形。
HUD元素方面，我规划加几个半透明的仪表盘框体，带有线条和光带扫描效果。坐标网格可以用渐变线条来实现，虚拟按钮用发光边框。
为了增加空间感，我需要加星空背景，虽然用户有粒子雨，但还是再加一些静态的星星点会更好。扫描线用CSS动画从上到下的线条即可。
交互逻辑方面，这个主要是展示性的，不需要复杂交互。但为了增强动感，可以让一些几何结构缓慢旋转，扫描线持续动画。
技术实现上，粒子效果用JavaScript动态生成比较灵活，几何结构可以用绝对定位的div加上transform。所有动画都用CSS keyframes来控制。
现在我觉得整体结构应该没问题了：背景星空→几何结构层→坐标网格→能量核心→仪表盘→粒子→扫描线→标题文字。每个层次都有对应的视觉效果。
标题文字要特别处理，用两层text-shadow做出霓虹发光效果，主标题用渐变文字加描边，副标题用白色半透背景条。
响应式也要考虑，虽然主要是PC展示，但还是要确保在16:9比例下能正常显示，几何元素的位置用相对单位。
现在思考得差不多了，可以开始写代码了。先写HTML结构框架，然后CSS样式，最后加JavaScript生成动态粒子。
HTML
预览
复制
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>PPIO派欧云 - PPT封面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            font-family: 'Orbitron', 'Arial', sans-serif;
            background: radial-gradient(ellipse at center, #1a1a2e 0%, #0a0a0a 100%);
            position: relative;
        }

        /* Animated starry background effect */
        .stars {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                radial-gradient(2px 2px at 20px 30px, #eee, transparent),
                radial-gradient(2px 2px at 40px 70px, rgba(255,255,255,0.8), transparent),
                radial-gradient(1px 1px at 50px 160px, #fff, transparent),
                radial-gradient(1px 1px at 130px 40px, #fff, transparent);
            background-repeat: repeat;
            background-size: 200px 200px;
            animation: twinkle 4s ease-in-out infinite;
        }

        @keyframes twinkle {
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }

        /* Main container for the title slide */
        .container {
            width: 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Animated 3D geometric background elements */
        .geometric-bg {
            position: absolute;
            width: 100%;
            height: 100%;
            perspective: 1200px;
        }

        .geo-shape {
            position: absolute;
            border: 2px solid rgba(0, 247, 255, 0.3);
            box-shadow: inset 0 0 15px rgba(0, 247, 255, 0.2),
                        0 0 25px rgba(0, 247, 255, 0.3);
            animation: rotate3d 25s linear infinite;
            backdrop-filter: blur(2px);
        }

        .geo-shape:nth-child(1) {
            width: 500px;
            height: 500px;
            left: -150px;
            bottom: -150px;
            transform: rotateX(45deg) rotateY(45deg);
            border-radius: 10%;
        }

        .geo-shape:nth-child(2) {
            width: 400px;
            height: 400px;
            right: -100px;
            top: -100px;
            transform: rotateX(-45deg) rotateZ(60deg);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
        }

        .geo-shape:nth-child(3) {
            width: 300px;
            height: 300px;
            left: 20%;
            top: 10%;
            transform: rotateY(120deg) rotateZ(30deg);
            clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
        }

        .geo-shape:nth-child(4) {
            width: 250px;
            height: 250px;
            right: 25%;
            bottom: 15%;
            transform: rotateX(75deg) rotateY(60deg);
            border-radius: 30%;
            border: 2px solid rgba(209, 111, 255, 0.25);
            box-shadow: inset 0 0 10px rgba(209, 111, 255, 0.15),
                        0 0 20px rgba(209, 111, 255, 0.25);
        }

        @keyframes rotate3d {
            0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translateY(0px); }
            33% { transform: rotateX(120deg) rotateY(120deg) rotateZ(120deg) translateY(-30px); }
            66% { transform: rotateX(240deg) rotateY(240deg) rotateZ(240deg) translateY(10px); }
            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg) translateY(0px); }
        }

        /* Animated energy core with pulsing effects */
        .energy-core {
            position: absolute;
            width: 600px;
            height: 600px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .core-pulse {
            position: absolute;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(0, 200, 255, 0.4) 0%, rgba(0, 100, 200, 0.2) 40%, rgba(0, 50, 100, 0.1) 70%, transparent 100%);
            animation: pulse 3s ease-in-out infinite;
        }

        @keyframes pulse {
            0%, 100% { transform: scale(0.8); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
        }

        .core-ring {
            position: absolute;
            width: 120%;
            height: 120%;
            top: -10%;
            left: -10%;
            border: 2px solid rgba(0, 200, 255, 0.6);
            border-radius: 50%;
            box-shadow: 0 0 30px rgba(0, 200, 255, 0.8),
                        inset 0 0 30px rgba(0, 200, 255, 0.4);
            animation: rotate 15s linear infinite;
        }

        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Interactive particle effects with floating animation */
        .particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        .particle {
            position: absolute;
            border-radius: 50%;
            animation: float 8s linear infinite;
        }

        .particle:nth-child(4n) {
            width: 4px;
            height: 4px;
            background: #00f7ff;
            box-shadow: 0 0 10px #00f7ff;
        }

        .particle:nth-child(4n+1) {
            width: 3px;
            height: 3px;
            background: #d16fff;
            box-shadow: 0 0 8px #d16fff;
        }

        .particle:nth-child(4n+2) {
            width: 2px;
            height: 2px;
            background: #a0f0ff;
            box-shadow: 0 0 6px #a0f0ff;
        }

        .particle:nth-child(4n+3) {
            width: 2px;
            height: 2px;
            background: #00ffea;
            box-shadow: 0 0 6px #00ffea;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) translateX(0) scale(0);
                opacity: 0;
            }
            10% {
                opacity: 1;
                transform: translateY(90vh) translateX(0) scale(1);
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) translateX(50vw) scale(0);
                opacity: 0;
            }
        }

        /* Semi-transparent HUD dashboard elements */
        .hud-element {
            position: absolute;
            border: 1px solid rgba(0, 247, 255, 0.6);
            background: rgba(15, 40, 60, 0.25);
            backdrop-filter: blur(10px);
            padding: 15px;
        }

        .hud-1 {
            top: 50px;
            right: 50px;
            width: 200px;
            height: 150px;
            clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 100%, 0 100%);
        }

        .hud-2 {
            bottom: 80px;
            left: 80px;
            width: 180px;
            height: 180px;
            border-radius: 10px;
            transform: rotate(45deg);
        }

        .hud-2::before {
            content: '';
            position: absolute;
            width: 2px;
            height: 60%;
            background: linear-gradient(to bottom, transparent, #00f7ff, transparent);
            left: 50%;
            top: 20%;
            border-radius: 50%;
            animation: scan 4s ease-in-out infinite;
        }

        @keyframes scan {
            0%, 100% { transform: translateX(-50%) rotate(0deg); }
            50% { transform: translateX(-50%) rotate(360deg); }
        }

        /* Animated grid layout with subtle glow effects */
        .grid {
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: 
                linear-gradient(rgba(0, 247, 255, 0.15) 1px, transparent 1px),
                linear-gradient(90deg, rgba(0, 247, 255, 0.15) 1px, transparent 1px);
            background-size: 60px 60px;
            transform: perspective(600px) rotateX(75deg) translateZ(0);
            animation: moveGrid 12s linear infinite;
            opacity: 0.4;
        }

        @keyframes moveGrid {
            0% { transform: perspective(600px) rotateX(75deg) translateZ(0) translateY(0); }
            100% { transform: perspective(600px) rotateX(75deg) translateZ(0) translateY(60px); }
        }

        /* Digital-style scan line overlay effect */
        .scan-lines {
            position: absolute;
            width: 100%;
            height: 100%;
            background: repeating-linear-gradient(
                0deg,
                transparent,
                transparent 2px,
                rgba(0, 247, 255, 0.03) 2px,
                rgba(0, 247, 255, 0.03) 4px
            );
            animation: scrolling 3s linear infinite;
        }

        @keyframes scrolling {
            0% { transform: translateY(0); }
            100% { transform: translateY(4px); }
        }

        /* Main title styling with gradient and glow effects */
        .title {
            position: relative;
            z-index: 10;
            text-align: center;
            color: #fff;
        }

        .main-title {
            font-size: 96px;
            font-weight: 900;
            letter-spacing: 8px;
            margin-bottom: 30px;
            text-transform: uppercase;
            background: linear-gradient(135deg, #00f7ff 0%, #d16fff 50%, #00ffea 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-shadow: 0 0 30px rgba(0, 247, 255, 0.8),
                         0 0 60px rgba(0, 247, 255, 0.5),
                         0 0 90px rgba(209, 111, 255, 0.3),
                         0 0 120px rgba(209, 111, 255, 0.2);
            animation: titleGlow 3s ease-in-out infinite alternate;
        }

        @keyframes titleGlow {
            0% { text-shadow: 0 0 30px rgba(0, 247, 255, 0.8), 0 0 60px rgba(0, 247, 255, 0.5), 0 0 90px rgba(209, 111, 255, 0.3), 0 0 120px rgba(209, 111, 255, 0.2); }
            100% { text-shadow: 0 0 40px rgba(0, 247, 255, 1), 0 0 80px rgba(0, 247, 255, 0.7), 0 0 120px rgba(209, 111, 255, 0.5), 0 0 160px rgba(209, 111, 255, 0.3); }
        }

        /* Subtitle styling with accent border */
        .subtitle {
            font-size: 28px;
            letter-spacing: 4px;
            padding: 20px 40px;
            background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(0, 247, 255, 0.6);
            border-radius: 8px;
            display: inline-block;
            position: relative;
            overflow: hidden;
        }

        .subtitle::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(0, 247, 255, 0.4), transparent);
            animation: shine 3s linear infinite;
        }

        @keyframes shine {
            0% { left: -100%; }
            100% { left: 100%; }
        }
    </style>
    <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
</head>
<body>
    <div class="stars"></div>
    
    <div class="container">
        <div class="geometric-bg">
            <div class="geo-shape"></div>
            <div class="geo-shape"></div>
            <div class="geo-shape"></div>
            <div class="geo-shape"></div>
        </div>
        
        <div class="grid"></div>
        
        <div class="energy-core">
            <div class="core-pulse"></div>
            <div class="core-ring"></div>
        </div>
        
        <div class="particles" id="particles"></div>
        
        <div class="hud-element hud-1"></div>
        <div class="hud-element hud-2"></div>
        
        <div class="scan-lines"></div>
        
        <div class="title">
            <h1 class="main-title">PPIO派欧云</h1>
            <h2 class="subtitle">中国领先的独立分布式云计算服务商</h2>
        </div>
    </div>

    <script>
        // Generate animated particles dynamically
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 80;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // Random horizontal positioning
                particle.style.left = Math.random() * 100 + '%';
                
                // Random animation delay
                particle.style.animationDelay = Math.random() * 8 + 's';
                
                // Random horizontal drift
                particle.style.setProperty('--end-x', (Math.random() - 0.5) * 100 + 'vw');
                
                container.appendChild(particle);
            }
        }

        // Initialize effects when page loads
        window.addEventListener('load', function() {
            createParticles();
        });
    </script>
</body>
</html>