3 个 CSS 纸质效果实验

在过去的几天里，我一直在 CodePen 中尝试一些受纸张启发的 CSS 效果，并想与大家分享！

实验一：用胶带粘住边缘的折叠纸

受到新年决心（以及我缺乏新年决心）的启发，在这个实验中，我玩弄了折叠纸效果，并将透明层看起来像透明胶带（或您所在国家/地区流行的任何品牌的胶带😂）。

折叠纸张效果是用::after伪元素创建的（我使用它::after来::before确保文本看起来也像是在纸中折叠的），带有两层线性渐变 - 一个从左到右，另一个从上到下。

胶带本身的不透明度设置为 0.5，以产生半透明效果，并且我在胶带末端添加了一个小的虚线边框，使其看起来有点锯齿状，就像被剪过一样。

实验二：固定卡片

然后我想尝试一些不那么皱的纸，就尝试用别针别住卡片。我坚持“贴在布告栏上”的原则，卡片上只是简单地印了个 Zoom 会议的提醒。

当然，最有趣的部分是那个别针。我喜欢 CSS 艺术😄。别针的各个组件都在代码里注释了，这样你就能明白我是怎么做的了（就像所有这些实验一样，CSS 以后可能会有改进，但希望你能明白我的意思！）。和折叠纸一样，它主要依靠线性渐变，这次是径向渐变，让它看起来更“逼真”。

实验三：“联系我”撕纸

还记得以前在告示牌、路灯柱或者任何地方都能看到广告，上面贴着可以撕下来带回家的电话号码小纸条吗？我觉得用 CSS 做一个类似“联系方式”的页面应该挺有意思的。

我想尝试使其语义化且易于理解，所以所有联系链接都标记为列表项（这样可以确保它们以列表的形式呈现给屏幕阅读器用户，并在 CSS 加载失败时显示为美观的原始列表）。我还大量使用了rem单位，这是一种略带 hack 的技巧，确保当用户在浏览器中设置了较大的字体大小时，内容能够自动缩放，而不会影响其“CSS 艺术” 🙂

我尝试让一些纸条稍微突出一些，就像是从海报上稍微折出来的一样。为此，我skew又用了一些线性渐变。如果以后能增加一些交互功能，让用户从列表中“撕”下来，那一定很酷。或许以后可以尝试一下！