设计思路
- 使用深空蓝背景搭配全息光效
- 左侧使用全息立方体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>
最终效果
科技感广告位 – 样式四
全息科技 · 未来视界
沉浸式全息交互体验，重新定义人机交互的未来
老虎PHP
