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

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

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

其他

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/2974.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python测试框架Pytest的基础入门

Pytest简介 Pytest is a mature full-featured Python testing tool that helps you write better programs.The pytest framework makes it easy to write small tests, yet scales to support complex functional testing for applications and libraries. 通过官方网站介绍…

ios 通过xib自定义控件

通过xib自定义控件 xib和stroyboayd对比 共同点&#xff1a; 都是用来描述软件界面 都是用interface Builder工具来编辑 本质都是转换成代码去创建控件 不同点&#xff1a; xib是轻量级的&#xff0c;用来描述局部ui界面 创建模型文件 XMGCar 自定义控件 xib 图形设计 …

graylog源码搭建

这里主要讲如何源码安装graylog 下载地址&#xff1a; https://www.graylog.org/downloads/ 下载带有JVM的源码文件源码安装 下载graylog-5.1.3-linux-x64.tgz&#xff0c;并上传到Centos中&#xff0c;执行以下操作 tar -zxvf graylog-5.1.3-linux-x64.tgzcd /etcmkdir -p …

每天一道C语言编程:Cylinder(圆柱体问题)

题目描述 使用一张纸和剪刀&#xff0c;您可以通过以下方式切出两个面形成一个圆柱体&#xff1a; 水平切割纸张&#xff08;平行于较短的边&#xff09;以获得两个矩形部分。 从第一部分开始&#xff0c;切出一个最大半径的圆。圆圈将形成圆柱体的底部。 将第二部分向上滚动&…

在 Amazon 上以高可用性模式实现 Microsoft SQL 数据库服务现代化的注意事项

许多企业都有需要 Microsoft SQL Server 来运行关系数据库工作负载的应用程序&#xff1a;一些应用程序可能是专有软件&#xff0c;供应商可使用它强制 Microsoft SQL Server 运行数据库服务&#xff1b;其他应用程序可能是长期存在的、自主开发的应用程序&#xff0c;它们在最…

我们如何在 Elasticsearch 8.6、8.7 和 8.8 中加速数据摄入

作者&#xff1a;Adrien Grand, Joe Gallo, Tyler Perkins 正如你们中的一些人已经注意到的&#xff0c;Elasticsearch 8.6、8.7 和 8.8 在各种数据集上带来了良好的索引加速&#xff0c;从简单的关键字到繁重的 KNN 向量&#xff0c;以及摄取管道繁重的摄取工作负载。 摄取涉及…

跳跃表SkipList(简单的C++实现)

不懂跳跃表的请直接百度 直接上实现 #include <iostream> #include <string.h> #include <ctime>using namespace std;template<typename T> struct SkipNode {inline static constexpr int Rate3;inline static constexpr int MaxHeight8;inline sta…

2023版7月软件测试面试题(800道)【附带答案】持续更新...

又到了立flag的时候&#xff0c;你的目标是拿下大厂offer&#xff1f;还是多少万年薪&#xff1f;其实这些都离不开日积月累的过程。 为此我特意整理出一份&#xff08;超详细笔记/面试题&#xff09;它几乎涵盖了所有的测试开发技术栈&#xff0c;非常珍贵&#xff0c;人手一…

批量添加:vue+easyexcel 上传excel文件解析为Java对象并保存到数据库

对于像数据库中批量添加数据&#xff0c;我们一般会选择通过Excel文件先按照固定的格式将数据保存&#xff0c;然后再通过系统上传进而保存到数据库中。 阿里的excel解析工具EasyExcel和Apach的POI都能进行Excel文件的解析&#xff0c;但是EasyExcel操作起来要相对更简单一些&…

cancal报错 config dir not found

替换classpath中间封号两边的值

1186. 删除一次得到子数组最大和;1711. 大餐计数;1834. 单线程 CPU

1186. 删除一次得到子数组最大和 解题思路&#xff1a;如果没做过还不是很好想&#xff0c;当时自己第一反应是双指针&#xff0c;结果是个动态规划的题。 核心就是dp的定义&#xff0c;dp[i][k]表示以arr[i]结尾删除k次的最大和。看到这里其实就有一点思路了 dp[i][0]表示以…

K8S pod 均匀调度分配 —— 筑梦之路

pod调度简介 在 k8s 中 通过 kube-scheduler 组件来实现 pod 的调度&#xff0c;所谓调度&#xff0c;即把需要创建的 pod 放到 合适的 node 上&#xff0c;大概流程为&#xff0c;通过对应的 调度算法 和 调度策略&#xff0c;为待调度的 pod 列表中的 pod 选择一个最合适的 N…

JVM理论(五)执行引擎--解释器/JIT编译器

概述 首先执行引擎是java虚拟机核心的组成部分之一;而JVM的主要任务是装载字节码到内存,但不能够直接运行在操作系统之上.因为字节码指令并非等价于本地机器指令,它仅仅包含能够被JVM所识别的指令、符号表、以及其他信息;而此时执行引擎就华丽登场,它的任务就是将字节码指令解…

rust学习-泛型和trait

泛型 Option&#xff0c;Vec&#xff0c;HashMap<K, V>&#xff0c;Result<T, E>等&#xff0c;取函数以减少代码重复的机制 背景 两个函数&#xff0c;不同点只是名称和签名类型 fn largest_i32(list: &[i32]) -> i32 {let mut largest list[0];for &…

【python】动态规划:牛客网HJ24 合唱队

描述 N 位同学站成一排&#xff0c;音乐老师要请最少的同学出列&#xff0c;使得剩下的 K 位同学排成合唱队形。 设KK位同学从左到右依次编号为 1&#xff0c;2…&#xff0c;K &#xff0c;他们的身高分别为T1,T2,…,TKT1​,T2​,…,TK​ &#xff0c;若存在i(1≤i≤K)i(1≤i…

【数字IC前端笔试真题精刷(2021)】大疆——数字芯片开发工程师A/B卷

声明:本专栏所收集的数字IC笔试题目均来源于互联网,仅供学习交流使用。如有侵犯您的知识产权,请及时与博主联系,博主将会立即删除相关内容。 笔试时间:2021年A/B卷 题目类型:(只列了选择题) 大疆芯片开发岗A卷 文章目录 一、单选题 / 多选题1.(单选)关于流水线设计的…

C++并发编程(6):单例模式、once_flag与call_once、call_once实现单例

单例模式 参考博客 【C】单例模式&#xff08;饿汉模式、懒汉模式&#xff09; C单例模式总结与剖析 饿汉单例模式 C实现 C单例模式(饿汉式) 设计模式&#xff08;Design Pattern&#xff09;是一套被反复使用、多数人知晓的、经过分类的、代码设计经验的总结 &#xff0c;一共…

行为型模式 - 策略模式

概述 先看下面的图片&#xff0c;我们去旅游选择出行模式有很多种&#xff0c;可以骑自行车、可以坐汽车、可以坐火车、可以坐飞机。 作为一个程序猿&#xff0c;开发需要选择一款开发工具&#xff0c;当然可以进行代码开发的工具有很多&#xff0c;可以选择Idea进行开发&…

Web 3.0时代,重塑教育与学习方式的可能性

随着科技的快速发展和互联网的普及&#xff0c;教育领域也面临着巨大的机遇和挑战。Web 3.0时代的到来为教育与学习方式带来了全新的可能性。在这个数字化时代&#xff0c;我们可以探索和利用Web 3.0技术&#xff0c;重塑教育的方式&#xff0c;提供更个性化、互动性和灵活性的…

在Illustrator中创建 3D 冰淇淋模型对象

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 一旦你学会了如何在Illustrator中制作一个对象3D&#xff0c;你可以前往Envato Elements&#xff0c;在那里你可以找到大量的3D设计来激发你的灵感。这个基于订阅的市场拥有超过 2&#xff0c;000 个 Illus…