当前位置：首页 > CSS

用css制作我的江湖

2026-02-27 01:45:40CSS

设计整体布局

采用古风山水画背景，使用CSS渐变或背景图片实现水墨效果。主体容器宽度设为80%，居中显示，边框采用仿古卷轴样式，通过box-shadow和border-image实现。

body {
  background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 50%, #80deea 100%);
  font-family: "楷体", "STKaiti", serif;
}

.container {
  width: 80%;
  margin: 0 auto;
  border: 15px solid transparent;
  border-image: url('scroll-border.png') 30 round;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

添加动态元素

创建飘动的云朵和飞鸟动画，使用CSS关键帧实现移动效果。云朵用半透明白色圆形组合，飞鸟采用SVG路径绘制。

.cloud {
  position: absolute;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  animation: float 30s infinite linear;
}

@keyframes float {
  from { transform: translateX(-100px); }
  to { transform: translateX(calc(100vw + 100px)); }
}

.bird {
  position: absolute;
  width: 30px;
  height: 20px;
  background: url('bird.svg') no-repeat;
  animation: fly 15s infinite linear;
}

设计交互组件

制作仿古按钮和输入框，采用木质纹理背景和雕刻效果。悬停时添加剑光闪过的特效，通过伪元素和过渡实现。

.btn {
  background: url('wood-texture.jpg');
  border: 2px groove #8d6e63;
  color: #3e2723;
  padding: 8px 20px;
  position: relative;
  overflow: hidden;
}

.btn:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.7),
    transparent
  );
  transition: 0.5s;
}

响应式适配

针对不同设备尺寸调整布局，在小屏幕上隐藏部分装饰元素，调整字体大小和间距。

@media (max-width: 768px) {
  .container {
    width: 95%;
    border-width: 8px;
  }

  .decoration {
    display: none;
  }

  h1 {
    font-size: 1.5rem;
  }
}

文字排版特效

为标题添加毛笔字书写动画，通过@keyframes控制background-size变化模拟书写过程。正文采用竖排文字布局，适合古风内容展示。

.title {
  background: linear-gradient(#333, #333) no-repeat;
  background-size: 0% 100%;
  animation: write 3s forwards;
  -webkit-background-clip: text;
  color: transparent;
}

@keyframes write {
  from { background-size: 0% 100%; }
  to { background-size: 100% 100%; }
}

.vertical-text {
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 2;
}

用css制作我的江湖