css 就像技术中的其他东西一样 – 它总是在变化和发展。该领域正在进行的开发是 css 网格布局模块级别 3，也称为 css masonry 布局。 theo 制作了一段视频，介绍了它的开发方式以及苹果和谷歌就如何实施它进行的辩论。
所有这些让我很高兴尝试 css 砌体！ webkit 照片演示启发我用猫的照片制作类似的视图！谁不爱猫呢？
先决条件
要查看我们要构建的内容，您需要 safari 技术预览版，或者在 firefox 中将功能标志 layout.css.grid-template-masonry-value.enabled 设置为 true。
要访问 firefox 中的功能标志，请在地址栏中输入 about:config。按回车键，您可以搜索网格或上面提到的字符串。将其切换为 true，然后就可以开始了！
基本熟悉 typescript/javascript、react 和 next。
立即学习“前端免费学习笔记（深入）”；
设置一个新项目
在终端中创建一个新的 next 项目。
运行此命令：npx create-next-app@latest
那么您可能需要安装以下软件包：
create-next-app@15.0.1ok to proceed? (y) y
为您的项目命名。我称我的猫为图片瀑布
继续在终端中设置下一个项目（确保不要使用 tailwind）：
would you like to use typescript? yeswould you like to use eslint? yeswould you like to use tailwind css? nowould you like your code inside a 'src/' directory? nowould you like to use app router? (recommended) yeswould you like to use turbopack for next dev? nowould you like to customize the import alias (@/* by default)? no
当您的项目完成设置后：
通过在终端 cd your-project-name 中运行此命令将目录更改为您的项目。
然后运行此命令代码在 vscode 中打开它。 （如果还没有设置此命令）
删除样板
应用程序文件夹内有一个名为 page.tsx 的文件，其中包含样板文件中呈现的所有代码。
删除该代码并暂时保留 div 或片段。这是一个例子：
CSS实现抽象图像翻转3D立方体
CSS实现抽象图像翻转3D立方体，该立方体有6个不同颜色和形态的半透明抽象图像，在网页中自由翻转。名称：CSS实现抽象图像翻转3D立方体
14 查看详情
// app/page.tsxexport default function home() { return ;}
应用程序文件夹中还有一个页面样式表。它名为 page.module.css，您可以打开它，选择其中的所有样式，然后删除它们。
让我们更改我们的元数据，让我们的应用程序的功能更加清晰。像这样更新layout.tsx：
// app/layout.tsximport type { metadata } from "next";import "./globals.css";export const metadata: metadata = { title: "cat pics", description: "bringing cats your way with experimental css",};export default function rootlayout({ children,}: readonly) { return ( {children} );}
如果您也愿意的话，可以添加一个猫的图标（如何在下一步中添加图标）！
创建 .env 文件
在项目根目录创建一个 .env 文件。我们将在此处存储来自 cat api 的 api 密钥。
注册 cat api
从 the cat api 注册免费的 api 密钥。初始注册后，您将收到一封包含 api 密钥的电子邮件。复制该 api 密钥并在 .env 中创建一个新变量。我将我的钥匙称为 cat_key。
您的本地 .env 应如下所示：cat_key=your_api_key。如果您部署此功能，请确保将其添加到部署的任何位置。
把猫的照片拿出来！
我从前面提到的 webkit 演示中收集信息来创建猫图片的页面和样式。在这里，我们调用 api，映射结果，并渲染返回的图片：
// app/page.tsximport styles from "./page.module.css";const url = "https://api.thecatapi.com/v1/images/search?limit=50";const api_key = process.env.cat_key || '';interface catimage { id: string; url: string;}async function getcatpics() { try { const res = await fetch(url, { headers: {"x-api-key": api_key}, }); const result = await res.json(); return result; } catch (error) { throw new error(`unable to get the cute cats! ${error}`); }}export default async function home() { const cats = await getcatpics(); return ( {cats.map((cat: catimage, index: number) => ( 
))} );}
为照片设计风格
现在我们已经引入了图片，让我们看看 css 砌体的实际效果！从 webkit 的书中取出一页，这里是 page.module.css：
.page { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr) minmax(14rem, 2fr)) minmax(8rem, 1fr); grid-template-rows: masonry; gap: 1rem;}.card { position: relative; counter-increment: item-counter;}.catPic { width: 100%; height: auto; display: block; border-radius: 1ch;}
如果您保存文件并在终端中运行 npm run dev，它应该会给您一个像这样的页面（随机选择图像）：
在此基础上还有很大的潜力！图像保持其质量，并且没有媒体查询，页面感觉响应迅速。您可以通过其他方式使用 css 中的内容，theo 在他的视频中展示了它们，webkit 和 google 的演示也是如此。
现在成为一名开发者真是太好了。许多令人惊叹的工具、功能、运行时等等正在构建中。时间会告诉我们如何在 css 中实现这一点。不管最终如何决定，结论是 css 变得越来越酷。
看看我为这个项目制作的存储库。我也在 vercel 上部署了它，如果您使用先决条件中提到的两个浏览器设置之一，您可以在这里查看。
您可以构建一个页面来渲染猫的图片，或者在工作中完成工作。您如何看待 css 的这些功能？你打算如何使用它们？
以上就是CSS 砌体 Catness的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1166794.html
微信扫一扫 
支付宝扫一扫 
