如何实现标题水平滑动并将底部部分偏移x像素？

结合你给出的HTML结构 <h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>，以下是匹配目标视觉效果的CSS实现：

核心代码 #

<h1>DISCOVER <span>WEB 3</span> DIMENSIONS</h1>

/* 标题基础样式 */
h1 {
  font-family: 'Helvetica Neue', sans-serif;
  font-size: 3rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* span元素特殊效果 */
h1 span {
  display: inline-block;
  /* 实现图中的倾斜效果 */
  transform: skew(-12deg);
  /* 深色背景+白色文字匹配视觉 */
  background: #1a1a2e;
  color: #fff;
  /* 调整背景块大小 */
  padding: 0.3rem 1rem;
  /* 避免与前后文字过度拥挤 */
  margin: 0 0.5rem;
  /* 可选：增加轻微阴影提升层次感 */
  box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
}

效果自定义说明 #

• 若需要渐变背景，将background替换为渐变值即可，例如：background: linear-gradient(90deg, #0f3460 0%, #16537e 100%);
• 倾斜角度skew()的数值可按需修改，正负值控制倾斜方向
• 字体、字号、间距等属性可根据页面整体风格调整

内容的提问来源于stack exchange，提问作者sbounmy