CSS 实现 Turbo 官网 3D 网格线背景动画

转载请注明出处,点击此处 查看更多精彩内容

查看 Turbo 官网 时发现它的背景动画挺有意思,就自己动手实现了一下。下面对关键点进行解释说明,查看完整代码及预览效果请 点击这里

简单说明原理:使用 mask-image 遮罩绘制网格,使用 perspectiverotate 动画设置 3D 纵深效果,并添加位移动画即可。

DOM 结构

html 复制代码
<div class="container">
  <div class="lines"></div>
</div>
  • .container 容器用来做 3D 变换。
  • .lines 用来绘制网格线并执行动画。

绘制网格线

css 复制代码
.lines {
  ...,
  background-image: linear-gradient(90deg, var(--left-line-color) 45%, transparent 50%, var(--right-line-color) 55%);
  -webkit-mask-image: linear-gradient(90deg, #000 2px, transparent 0), linear-gradient(180deg, #000 2px, transparent 0);
  mask-image: linear-gradient(90deg, #000 2px, transparent 0), linear-gradient(180deg, #000 2px, transparent 0);
  -webkit-mask-size: var(--grid-size) var(--grid-size);
  mask-size: var(--grid-size) var(--grid-size);
}
  • background-image 绘制一个从左向右渐变的背景。
  • mask-image 绘制水平和垂直的线条做遮罩。
  • mask-size 设置单个遮罩的尺寸,即网格尺寸。

3D 变换

配置 3D 变换使网格拥有从远处延伸到近前的效果。

css 复制代码
.container {
  ...,
  perspective: 1000px;
}

.lines {
  transform: rotateX(75deg);
}

添加动画

css 复制代码
@keyframes move {
  from {
    transform: rotateX(75deg) translateY(0);
  }

  to {
    transform: rotateX(75deg) translateY(var(--grid-size));
  }
}

.lines {
  transform: rotateX(75deg) translateY(0);
  animation: move 1s linear infinite;
}

设置动画 Y 轴移动一个网格的长度,并无限循环。

其他

设置顶部和底部遮罩,遮挡住顶部杂乱的线条,并使底部拥有淡出的效果。

css 复制代码
.container::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,  var(--bg-color) 50%, transparent);
  z-index: 1;
}

.container::after {
  content: "";
  position: absolute;
  inset: calc(100% - var(--grid-size)) 0 0;
  height: var(--grid-size);
  background: linear-gradient(180deg, transparent, var(--bg-color));
  z-index: 1;
}
相关推荐
玩电脑的辣条哥2 小时前
Python如何播放本地音乐并在web页面播放
开发语言·前端·python
ew452182 小时前
ElementUI表格表头自定义添加checkbox,点击选中样式不生效
前端·javascript·elementui
suibian52352 小时前
AI时代:前端开发的职业发展路径拓宽
前端·人工智能
Moon.92 小时前
el-table的hasChildren不生效?子级没数据还显示箭头号?树形数据无法展开和收缩
前端·vue.js·html
垚垚 Securify 前沿站2 小时前
深入了解 AppScan 工具的使用:筑牢 Web 应用安全防线
运维·前端·网络·安全·web安全·系统安全
工业甲酰苯胺5 小时前
Vue3 基础概念与环境搭建
前端·javascript·vue.js
mosquito_lover16 小时前
怎么把pyqt界面做的像web一样漂亮
前端·python·pyqt
柴柴的小记9 小时前
前端vue引入特殊字体不生效
前端·javascript·vue.js
柠檬豆腐脑9 小时前
从前端到全栈:新闻管理系统及多个应用端展示
前端·全栈
bin91539 小时前
DeepSeek 助力 Vue 开发:打造丝滑的颜色选择器(Color Picker)
前端·javascript·vue.js·ecmascript·deepseek