找回密码
高级感广告位代码
4

高级感广告位代码

分享一些科技感、高级感的广告位代码，可以随意借鉴参考，代码不影响主站样式，可以参考或者修改部分代码！
吐血推荐

TB-Member 会员交易插件

支持邀请注册、VIP、返现、付费/评论/密码/登录阅读、付费/评论/登录下载、虚拟交易、登录（邮箱/手机/QQ/微信/支付宝/微博）、支付（微信/支付宝/积分）、积分、签到...

快讯

  • asdasd

    sadadasdas

  • 港股异动 | 芯片股午后集体拉升 国产半导体行业迎来并购浪潮 美关税或重构全球半导体供应链

    智通财经APP获悉，芯片股午后集体拉升，截至发稿，中芯国际(00981)涨3.5%，报51.8港元；华虹半导体(01347)涨3.09%，报48.06港元；宏光半导体(06908)涨3.08%，报0.67港元；上海复旦(01385)涨0.6%，报30.28港元。

    消息面上，华虹半导体近期公告称，正筹划以发行股份及支付现金的方式购买华力微的控股权，收购标的资产为华力微一部分成熟制程业务的股权。分析人士指出，此次资产并购是当前国产半导体行业并购浪潮的组成部分，华虹半导体也将进一步强化其聚焦成熟制程与特色工艺的战略定位，巩固其在汽车、工业、消费电子等市场的技术优势。

    此外，8月6日，特朗普宣布将对进口到美国的半导体征收100%的行业关税。西部证券指出，短期来看，半导体行业关税将显著推高生产成本，抬高电子产品价格压制需求。消息公布后，在美国有投资计划的公司股市表现较好。长期来看，区域国别成为半导体供应链重构的新变量。该行认为，关税及其设计和实施可能对半导体和科技行业产生深远影响，因为生产地点的价值从无形因素转变为由关税量化的指标。

  • 华尔街投行：巴菲特可能正大举抛售 预计股市风暴即将来临！

    财联社8月20日讯（编辑 周子意）据华尔街一位资深市场策略师预计，“股神”沃伦·巴菲特可能正在抛售股票，因为他预见到一场风暴即将来临，而等到股价暴跌后，他又可能会回购这些股票。

    韦德布什证券公司的首席投资策略师Paul Dietrich在一次采访中表示，“当经济和金融指标预示熊市或经济衰退即将来临时，奥马哈先知（指沃伦·巴菲特）就有从股市中撤退的历史”。

    Dietrich指出，尽管近期美股市场飙升不断创下新高，但从数据来看，巴菲特的伯克希尔·哈撒韦公司已连续11个季度净卖出股票。在此期间，该公司抛售了2120亿美元的股票，仅购入345亿美元，这意味着其净抛售额超过了1770亿美元。

    此外Dietrich补充道，伯克希尔在过去四个季度也停止了股票回购，因为他认为伯克希尔的股票不再便宜。这一暂停与伯克希尔在2020年和2021年回购超过200亿美元股票的高峰时期相比，标志着一个重大变化。

    积累现金储备

    在截至6月30日的三年间，伯克希尔因不断出售股票、加上回购的缺乏，其现金储备已增加了一倍多，达到创纪录的3440亿美元。

    这让人联想到，巴菲特在2008年金融危机和互联网泡沫破裂之前也同样积累了大量现金。

    韦德布什的Dietrich表示，巴菲特在过去的经济衰退之前就有抛售股票转而持有现金的做法。

    在上世纪90年代末的互联网泡沫时期，1997年，伯克希尔的现金储备约为110亿美元，后到1998年增加到350亿美元，反之其净股票抛售额从1999年的7亿美元增加到2000年的27亿美元。

    在金融危机爆发时，这家企业巨头已将现金储备增加到超过700亿美元，后来于2008年底，又将现金储备降至约520亿美元，因为想利用资产价格低迷的机会，抄底一些暴跌的股票。

    Dietrich还指出，在5月伯克希尔的年度股东大会上，巴菲特对市场表现得相当谨慎。在巴菲特宣布打算在今年年底卸任首席执行官一职之前，他就曾抱怨称，随着资产估值持续攀升，潜在的便宜资产越来越难寻。

    此外，一项所谓的“巴菲特指标”也反映出美股目前估值过高。该指标将美国股市市值与美国经济规模进行比较，目前该指标已飙升至超过210%的历史高位。

    这意味着所有活跃交易的美国股票的总市值超过了美国最新季度国内生产总值（GDP）的两倍。巴菲特曾写道，在这一比率接近200%时买入股票无异于“玩火”。

    现在应该投资2000美元在BRKa吗？

    买入BRKa前必读： Investing.com旗下ProPicks AI，为投资者精心打造了6大投资模型，帮助投资者轻松发现潜力股，促进财富稳健增长。迄今为止，已有超13万付费会员对ProPicks AI报以深厚信赖，并已用上最新AI技术，探索投资新机遇。 最近，ProPicks AI算法再次成功甄选出一批当下最具投资价值的股票。这些股票有望在未来数年内脱颖而出，为投资者带来丰厚回报。 BRKa是否也在其中？

  • 科技感动态广告位设计 - 样式1

    设计思路

    • 使用深空蓝背景搭配全息光效
    • 左侧使用全息立方体SVG作为logo
    • 中央文字区域使用全息投影效果
    • 右侧按钮带有能量充能效果
    • 添加悬浮粒子与光线轨迹效果

    最终代码实现

    <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>科技感广告位 - 样式1</title>
    <style>
        /* 基础重置 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        /* 使用特定命名空间避免样式冲突 */
        .hologram-ad {
            width: 820px;
            height: 100px;
            background: linear-gradient(135deg, #050520 0%, #0a1a35 50%, #102a4e 100%);
            border: 1px solid rgba(0, 195, 255, 0.4);
            box-shadow: 0 0 20px rgba(0, 150, 255, 0.3),
                        inset 0 0 20px rgba(0, 150, 255, 0.1);
            display: flex;
            align-items: center;
            padding: 0 20px;
            position: relative;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
            margin: 0;
            box-sizing: border-box;
        }

        /* 全息网格效果 */
        .hologram-ad::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                linear-gradient(90deg, transparent 95%, rgba(0, 195, 255, 0.1) 95%),
                linear-gradient(transparent 95%, rgba(0, 195, 255, 0.1) 95%);
            background-size: 30px 30px;
            z-index: 1;
            pointer-events: none;
            animation: gridMove 15s linear infinite;
        }

        /* 全息光晕效果 */
        .hologram-ad::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 20% 30%, rgba(0, 150, 255, 0.2), transparent 25%),
                        radial-gradient(circle at 80% 70%, rgba(0, 150, 255, 0.2), transparent 25%);
            z-index: 1;
            pointer-events: none;
        }

        /* Logo区域样式 */
        .hologram-ad-logo {
            flex: 0 0 auto;
            width: 70px;
            height: 70px;
            margin-right: 25px;
            position: relative;
            z-index: 2;
            filter: drop-shadow(0 0 8px rgba(0, 195, 255, 0.7));
        }

        /* 内容区域样式 */
        .hologram-ad-content {
            flex: 1;
            color: #fff;
            position: relative;
            z-index: 2;
            padding-right: 25px;
        }

        .hologram-ad-title {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
            background: linear-gradient(90deg, #00c3ff, #00ffea, #00c3ff);
            background-size: 200% auto;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: hologramText 3s linear infinite;
            text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
        }

        .hologram-ad-description {
            font-size: 14px;
            color: #a0e6ff;
            letter-spacing: 0.5px;
            text-shadow: 0 0 5px rgba(160, 230, 255, 0.7);
        }

        /* 按钮样式 */
        .hologram-ad-button {
            flex: 0 0 auto;
            background: rgba(0, 150, 255, 0.2);
            color: #ffffff;
            border: 1px solid #00c3ff;
            padding: 12px 28px;
            border-radius: 4px;
            font-weight: bold;
            cursor: pointer;
            position: relative;
            z-index: 2;
            overflow: hidden;
            transition: all 0.3s ease;
            text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
            box-shadow: 0 0 15px rgba(0, 195, 255, 0.5),
                        inset 0 0 10px rgba(0, 195, 255, 0.2);
            letter-spacing: 1px;
        }

        .hologram-ad-button:hover {
            background: rgba(0, 150, 255, 0.3);
            box-shadow: 0 0 20px rgba(0, 195, 255, 0.8),
                        inset 0 0 15px rgba(0, 195, 255, 0.3);
            transform: translateY(-2px);
        }

        .hologram-ad-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
            transition: 0.5s;
        }

        .hologram-ad-button:hover::before {
            left: 100%;
        }

        /* 光线效果容器 */
        .hologram-ad-rays {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.5;
            z-index: 1;
            pointer-events: none;
        }

        .ray {
            position: absolute;
            background: linear-gradient(90deg, transparent, rgba(0, 195, 255, 0.7), transparent);
            width: 100px;
            height: 1px;
            opacity: 0;
            animation: rayMove 5s linear infinite;
        }

        /* 悬浮粒子 */
        .particle {
            position: absolute;
            background: rgba(0, 195, 255, 0.7);
            border-radius: 50%;
            opacity: 0;
            animation: particleFloat 8s linear infinite;
        }

        /* 动画定义 */
        @keyframes gridMove {
            0% { background-position: 0 0; }
            100% { background-position: 30px 30px; }
        }

        @keyframes hologramText {
            0% { background-position: 0% 50%; }
            100% { background-position: 200% 50%; }
        }

        @keyframes rayMove {
            0% {
                transform: translateX(-100px) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 0.7;
            }
            90% {
                opacity: 0.7;
            }
            100% {
                transform: translateX(900px) rotate(0deg);
                opacity: 0;
            }
        }

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

        @keyframes cubeRotate {
            0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
            100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
        }

        @keyframes pulse {
            0% { opacity: 0.5; }
            50% { opacity: 1; }
            100% { opacity: 0.5; }
        }
    </style>
</head>
<body>
    <div class="hologram-ad">
        <!-- 光线效果 -->
        <div class="hologram-ad-rays" id="raysContainer"></div>
        
        <!-- Logo区域 - 使用SVG代码 -->
        <div class="hologram-ad-logo">
            <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
                <defs>
                    <linearGradient id="hologram-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" stop-color="#00c3ff" />
                        <stop offset="100%" stop-color="#00ffea" />
                    </linearGradient>
                    <filter id="hologram-glow" x="-20%" y="-20%" width="140%" height="140%">
                        <feGaussianBlur stdDeviation="3" result="blur"/>
                        <feComposite in="SourceGraphic" in2="blur" operator="over"/>
                    </filter>
                </defs>
                
                <!-- 立方体 -->
                <g class="cube" filter="url(#hologram-glow)" transform="translate(50,50)">
                    <!-- 后面 -->
                    <polygon points="-20,-20 -20,20 20,20 20,-20" fill="none" stroke="url(#hologram-gradient)" stroke-width="1" opacity="0.7">
                        <animate attributeName="opacity" values="0.5;0.8;0.5" dur="3s" repeatCount="indefinite" />
                    </polygon>
                    
                    <!-- 前面 -->
                    <polygon points="-15,-15 -15,25 25,25 25,-15" fill="none" stroke="url(#hologram-gradient)" stroke-width="1">
                        <animate attributeName="opacity" values="0.7;1;0.7" dur="2s" repeatCount="indefinite" />
                    </polygon>
                    
                    <!-- 连接线 -->
                    <line x1="-20" y1="-20" x2="-15" y2="-15" stroke="url(#hologram-gradient)" stroke-width="1" />
                    <line x1="-20" y1="20" x2="-15" y2="25" stroke="url(#hologram-gradient)" stroke-width="1" />
                    <line x1="20" y1="20" x2="25" y2="25" stroke="url(#hologram-gradient)" stroke-width="1" />
                    <line x1="20" y1="-20" x2="25" y2="-15" stroke="url(#hologram-gradient)" stroke-width="1" />
                    
                    <!-- 中心点 -->
                    <circle cx="0" cy="0" r="3" fill="url(#hologram-gradient)">
                        <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
                    </circle>
                    
                    <!-- 动画旋转 -->
                    <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="360 0 0" dur="10s" additive="sum" repeatCount="indefinite" />
                    <animateTransform attributeName="transform" type="rotate" from="0 0 0" to="0 360 0" dur="15s" additive="sum" repeatCount="indefinite" />
                </g>
                
                <!-- 轨道 -->
                <circle cx="50" cy="50" r="35" fill="none" stroke="url(#hologram-gradient)" stroke-width="0.5" stroke-dasharray="5,3" opacity="0.7">
                    <animate attributeName="r" values="35;37;35" dur="4s" repeatCount="indefinite" />
                </circle>
            </svg>
        </div>
        
        <!-- 内容区域 -->
        <div class="hologram-ad-content">
            <div class="hologram-ad-title">全息科技 · 未来视界</div>
            <div class="hologram-ad-description">沉浸式全息交互体验，重新定义人机交互的未来</div>
        </div>
        
        <!-- 按钮区域 -->
        <button class="hologram-ad-button">开启体验</button>
    </div>

    <script>
        // 创建光线效果
        function createRays() {
            const container = document.getElementById('raysContainer');
            const raysCount = 8;
            
            for (let i = 0; i < raysCount; i++) {
                const ray = document.createElement('div');
                ray.className = 'ray';
                
                // 随机角度和位置
                const top = Math.random() * 100;
                const angle = Math.random() * 360;
                const delay = Math.random() * 5;
                const duration = Math.random() * 3 + 4;
                
                ray.style.top = `${top}%`;
                ray.style.transform = `rotate(${angle}deg)`;
                ray.style.animation = `rayMove ${duration}s linear ${delay}s infinite`;
                
                container.appendChild(ray);
            }
        }
        
        // 创建悬浮粒子
        function createParticles() {
            const container = document.querySelector('.hologram-ad');
            const particlesCount = 12;
            
            for (let i = 0; i < particlesCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                
                // 随机位置和大小
                const left = Math.random() * 100;
                const size = Math.random() * 3 + 1;
                const delay = Math.random() * 8;
                const duration = Math.random() * 5 + 5;
                
                particle.style.left = `${left}%`;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.animation = `particleFloat ${duration}s linear ${delay}s infinite`;
                
                container.appendChild(particle);
            }
        }
        
        // 初始化
        document.addEventListener('DOMContentLoaded', function() {
            createRays();
            createParticles();
        });
    </script>
</body>
</html>

    最终效果

    科技感广告位 - 样式四
    全息科技 · 未来视界
    沉浸式全息交互体验，重新定义人机交互的未来

置顶推荐

优质的交易系统供应商

支持定制系统、定制UI、定制交易模式、交易算法，为您的下一个大项目提供机构级交易系统！

联系客服Telegram交流群

登录

找回密码

注册