新科技风格智能生活数字货币与加密资产展示网站

色彩搭配与视觉层次

主色调设计

采用深邃的蓝色(#1E90FF)和紫色(#800080)为主色调，辅以白色(#FFFFFF)与灰色(#F0F0F0)，营造出冷静且充满未来感的视觉效果。

强调色应用

交互元素采用亮绿色(#32CD32)和橙色(#FFA500)，增强用户的视觉吸引力与操作反馈。

/* 主要色彩变量 */
:root {
  --primary-blue: #1E90FF;
  --primary-purple: #800080;
  --neutral-white: #FFFFFF;
  --neutral-grey: #F0F0F0;
  --accent-green: #32CD32;
  --accent-orange: #FFA500;
}

/* 页面背景 */
body {
  background: var(--neutral-grey);
  color: var(--neutral-white);
  font-family: 'Roboto', sans-serif;
}

响应式网格系统与卡片式布局

响应式设计是现代网页不可或缺的一部分。通过CSS Grid布局，网站能够在不同设备上自适应展示内容。卡片式设计不仅使内容模块化，还提升了可读性与视觉层次。

网格系统

采用响应式网格布局，确保在不同屏幕尺寸下都能完美展示内容。

卡片设计

精美的卡片式布局，增强内容的可读性与视觉层次感。

/* 网格系统 */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  padding: 20px;
}

/* 卡片样式 */
.card {
  background: var(--neutral-white);
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
}

动态交互与动画效果

淡入动画

利用CSS3的动画与过渡效果，可以为用户提供流畅且富有活力的交互体验。

视差滚动

视差滚动与淡入效果在引导用户浏览时，增加了页面的层次感与动感。

/* 淡入动画 */
.fade-in {
  opacity: 0;
  animation: fadeInAnimation 2s forwards;
}

@keyframes fadeInAnimation {
  to {
    opacity: 1;
  }
}

/* 视差滚动 */
.parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  height: 500px;
}

/* 动态SVG图标 */
.icon-svg {
  width: 50px;
  height: 50px;
  fill: var(--primary-blue);
  transition: fill 0.3s ease;
}

.icon-svg:hover {
  fill: var(--accent-green);
}

固定导航栏与下拉菜单

导航设计

导航栏固定于页面顶部，确保用户在浏览过程中随时可以访问主要功能入口。

/* 导航栏样式 */
.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background: var(--primary-purple);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 1000;
}

.navbar .logo {
  font-size: 1.5em;
  color: var(--neutral-white);
  font-weight: bold;
}

.navbar .menu {
  display: flex;
  gap: 15px;
}

.navbar .menu-item {
  position: relative;
  color: var(--neutral-white);
  cursor: pointer;
}

.navbar .dropdown {
  display: none;
  position: absolute;
  top: 30px;
  background: var(--primary-purple);
  border-radius: 5px;
  overflow: hidden;
}

.navbar .menu-item:hover .dropdown {
  display: block;
}

.dropdown a {
  display: block;
  padding: 10px 15px;
  color: var(--neutral-white);
  text-decoration: none;
}

.dropdown a:hover {
  background: var(--accent-orange);
}

卡片模块的布局与设计

今日行情

通过卡片式布局展示最新的数字货币行情信息。

智能生活解决方案

模块化展示各种智能生活应用场景和技术方案。

虚拟现实专区的CSS3实现

VR体验

虚拟现实体验专区通过沉浸式的布局设计，结合CSS3的3D变换与过渡效果。

智能家居

为用户提供身临其境的智能家居探索场景。

/* VR专区容器 */
.vr-section {
  perspective: 1000px;
  padding: 50px 20px;
  background: var(--neutral-grey);
}

/* VR卡片 */
.vr-card {
  width: 300px;
  height: 200px;
  background: var(--primary-blue);
  border-radius: 15px;
  transform: rotateY(0deg);
  transition: transform 1s;
  cursor: pointer;
}

.vr-card:hover {
  transform: rotateY(180deg);
}

/* VR卡片内内容 */
.vr-card .front, .vr-card .back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--neutral-white);
}

.vr-card .back {
  background: var(--accent-orange);
  transform: rotateY(180deg);
}

字体与排版优化

Roboto字体

采用现代无衬线字体Roboto，其中标题使用加粗的Roboto Bold，正文内容则使用Roboto Regular。

排版层次

通过字体大小、粗细和颜色区分信息层次，提升内容的可读性。

/* 字体引入 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

/* 标题样式 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  color: var(--primary-blue);
}

/* 正文字体 */
p, span, a {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #333;
}