这是一个网页样式设计参考,旨在通过复古风格与现代科技的结合,打造独特的视觉体验。
融合深棕色、黄铜色等经典色调,以及墨绿色和暗金色的点缀,营造出复古与科技交融的独特氛围。页面背景采用旧纸张纹理,搭配低透明度的量子几何图形,展现历史与未来的碰撞。
以下代码展示了如何使用 CSS3 渐变效果实现温暖复古与科技感的完美融合:
.background-gradient {
background: linear-gradient(135deg, #784F30, #DAA520);
}
标题使用衬线字体 Playfair Display,正文则采用无衬线字体 Roboto,确保复古与现代的和谐统一。
body {
font-family: 'Roboto', sans-serif;
}
h1, h2, h3 {
font-family: 'Playfair Display', serif;
}
通过齿轮动画展示量子比特的旋转运动:
.gear-animation {
animation: rotate 5s infinite linear;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
按钮设计采用黄铜质感,悬停时具有光泽变化和轻微放大效果:
.copper-button {
background: #B8860B;
border-radius: 5px;
transition: all 0.3s ease;
}
.copper-button:hover {
background: #CD7F32;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
| 场景 | 特点 |
|---|---|
| 科教博物馆 | 展示量子计算的发展历程。 |
| 创意工作坊 | 利用复古器材模拟量子原理。 |
| 主题咖啡馆 | 结合复古装饰与量子主题饮品。 |
结合复古机械键盘、量子艺术装置等元素,打造跨越时空的独特体验。