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

这篇具有很好参考价值的文章主要介绍了CSS 实现 Turbo 官网 3D 网格线背景动画。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

转载请注明出处,点击此处 查看更多精彩内容
CSS 实现 Turbo 官网 3D 网格线背景动画,css,前端,动画

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

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

DOM 结构

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

绘制网格线

.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 变换使网格拥有从远处延伸到近前的效果。

.container {
  ...,
  perspective: 1000px;
}

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

添加动画

@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 轴移动一个网格的长度,并无限循环。

其他

设置顶部和底部遮罩,遮挡住顶部杂乱的线条,并使底部拥有淡出的效果。文章来源地址https://www.toymoban.com/news/detail-584896.html

.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;
}

到了这里,关于CSS 实现 Turbo 官网 3D 网格线背景动画的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • CSS 圆形分割按钮动画 带背景、图片

     

    2024年02月01日
    浏览(44)
  • css的rotate3d实现炫酷的圆环转动动画

    2.1 rotate3d rotate3d:rotate3d() CSS 函数定义一个变换,它将元素围绕固定轴移动而不使其变形。运动量由指定的角度定义; 如果为正,运动将为顺时针,如果为负,则为逆时针。 语法: 含义: x 类型,可以是 0 到 1 之间的数值,表示旋转轴 X 坐标方向的矢量。 y 类型,可以是 0

    2024年02月02日
    浏览(46)
  • 【前端|CSS系列第4篇】CSS布局之网格布局

    最近在做的一个项目前台首页有一个展示词条的功能,每一个词条都以一个固定大小的词条卡片进行展示,要将所有的词条卡片展示出来,大概是下面这种布局 每一行的卡片数目会随着屏幕大小自动变化,并且希望整个卡片区域周围不要有太大的留白,可是由于本人css学的并

    2024年02月16日
    浏览(35)
  • 【前端】CSS-Grid网格布局

    grid布局:网络布局,是目前唯一一种CSS二维布局方式,一种新的CSS布局模型,由纵横相交的两组网络线形成的框架性布局结构,能够同时处理行与列。号称是最强大的CSS布局方案。 擅长将一个页面划分为几个主要区域,以及定义这些区域的大小、位置、层次等关系 Grid布局是

    2024年02月09日
    浏览(36)
  • CSS动画及3D转换

    (1) 动画 是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 (2)相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 制作动画分为两步: 先定义动画 再使用(调用)动画 1.1用keyframes定义动

    2024年02月20日
    浏览(36)
  • 【CSS动画02--卡片旋转3D】

    css动画02--旋转卡片3D 当鼠标移动到中间的卡片上会有随着中间的Y轴进行360°的旋转,以下是几张图片的介绍,上面是鄙人自己录得一个供大家参考的小视频🤭

    2024年02月12日
    浏览(42)
  • CSS 2D转换 动画 3D转换

     一、CSS 2D转换 转换(transform) 是CSS3中具有颠覆性的特征之一,可以实现元素的位移(translate)、旋转(rotate)、缩放(scale)等效果 移动盒子的位置:定位、盒子的外边距、2d转换移动 1、2D转换之移动translate 1、我们tranlate里面的参数是可以用% 2、如果里面的参数是%  移动的距

    2024年04月12日
    浏览(39)
  • CSS笔记——触发式动画Transition、主动式动画Animation、Transfrom 动画、CSS 3D 动画、阴影和滤镜样式

    一、触发式动画Transition transition过渡动画, 一般配合伪类使用 属性值: transition-duration: 指定过渡效果的持续时间,以秒或毫秒为单位。 transition-timing-function: 指定过渡效果的时间函数,即控制过渡速度的函数。常用的值有 ease、linear、ease-in、ease-out、ease-in-out 等。 transi

    2024年02月07日
    浏览(51)
  • 【CSS笔记】CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画

    这篇文章,主要介绍CSS动画效果(2d、3d)之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。 目录 一、2d动画 1.1、渐变色 (1)线性渐变色 (2)径向渐变色

    2024年02月02日
    浏览(88)
  • CSS3D+动画

    1.css3D 给父元素设置 perspective:景深:近大远小的效果900-1200px这个范围内 transform-style:是否设置3D环境 flat 2D环境 默认值 perserve-3D环境 3D功能函数 1.位移: translateZ() translate3D(x,y,z) 2.3D旋转 属性: rotateX() rotateY() rotateZ() rotate3D(x,y,z,deg) x,y,z:0-1 0不旋转 deg:旋转的角度 3.3D缩放 缩放:

    2024年02月11日
    浏览(35)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包