CSS 磨砂玻璃信用卡

2025-05-24

CSS 磨砂玻璃信用卡

今天，我想尝试重现我偶然发现的Dede Dwiyansyah 的超酷运球投篮。

Dribbble 磨砂玻璃信用卡

这其实是一个 Figma 教程，教你如何创建磨砂信用卡效果。我决定尝试用 HTML 重现这张惊艳的照片！（当然，还加入了一些自己的创意）

现在是时候给出我自己的看法了CSS。

我知道可以实现这种效果，但通常人们会利用背景图像滤镜模糊，但在这种情况下，它对其后面的球不起作用。

所以我决定做一些研究，这就是我的最终结果。

CSS 玻璃信用卡效果

我将指导您如何使用 CSS 来实现这一点。

HTML结构

让我们首先定义HTML这个项目的结构。



<div class="holder">
  <div class="card">
    <div class="card__text">
      8293 3412 5976 1254
      <br />
      <small>12/24</small>
    </div>
    <svg>Insert Visa logo here</svg>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

正如您所见，我正在使用一个支架 div，我们需要这个 div 来容纳两个轨道球。

然后我们有了卡片，其中包含另一个用于文本的容器，最后是用于签证徽标的 SVG。

注意：完整的 SVG 签证标志可以在 Codepen 上找到。

现在是时候开始有趣的部分了CSS。

CSS 磨砂模糊玻璃效果

我将指导您完成重新创建这种酷炫的 CSS 磨砂玻璃效果所需的所有小部分。

首先，我们需要使用一种类似信用卡的字体。
我发现Google Fonts 上的 Inconsolata 字体效果很好。



@import url('https://fonts.googleapis.com/css2?family=Inconsolata&display=swap');
Enter fullscreen mode Exit fullscreen mode

通过这一行，我们直接从 Google 字体导入字体。

接下来，我们添加一个小重置来摆脱默认的边距和填充。



* {
  margin: 0;
  padding: 0;
}
Enter fullscreen mode Exit fullscreen mode

现在我们来设计一下主体。
在 dribbble shot 中，我们看到人物使用了渐变背景，所以我决定给它加一张背景图。



body {
  background: url('https://images.pexels.com/photos/1655166/pexels-photo-1655166.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')
    no-repeat center center;
  background-size: cover;
  display: grid;
  font-family: 'Inconsolata', monospace;
  min-height: 100vh;
  place-items: center;
}
Enter fullscreen mode Exit fullscreen mode

我还使用了CSS 网格居中方法，使卡片在页面中居中。
在这里，我们还加载了字体。

如上所述，我们使用支架来放置两个轨道球。
我们将使用伪元素来创建这些球，因此我们的支架需要是一个相对元素。



.holder {
  position: relative;
}
Enter fullscreen mode Exit fullscreen mode

现在让我们创建球，橙色球将使用before伪元素创建，蓝色球将使用after伪元素创建。

它们在尺寸和圆度方面有一些相似之处，所以让我们用双重选择器来写。



.holder:before,
.holder:after {
  animation: orbit 5s linear infinite;
  border-radius: 50%;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  content: '';
  height: 150px;
  position: absolute;
  width: 150px;
}
Enter fullscreen mode Exit fullscreen mode

由于 border-radius 为 50%，所以创建了一个圆球。
我们还添加了一个名为 的动画orbit。我们稍后会创建动画。

现在对于橙色球，我们需要创建一个径向渐变。



.holder:before {
  background: #ffe897;
  background: -moz-radial-gradient(top right, #ffe897, #f98a05);
  background: radial-gradient(to bottom left, #ffe897, #f98a05);
  background: -webkit-radial-gradient(top right, #ffe897, #f98a05);
}
Enter fullscreen mode Exit fullscreen mode

我使用css-gradient.com来生成渐变。

然后，对于蓝色的，我们也放置一个径向渐变，并将其向右偏移。
这个也需要一个动画延迟，否则它们会做完全一样的事情。



.holder:after {
  animation-delay: 2.5s;
  background: #e0e793;
  background: -moz-radial-gradient(bottom right, #e0e793, #6dd0f1);
  background: radial-gradient(to top left, #e0e793, #6dd0f1);
  background: -webkit-radial-gradient(bottom right, #e0e793, #6dd0f1);
  right: 0;
  top: 0;
  z-index: -1;
}
Enter fullscreen mode Exit fullscreen mode

然后是时候添加我们的卡了。

卡片本身具有固定的尺寸和一个小的盒子阴影，以使其更加突出：



.card {
  border: 1px solid #fff;
  border-radius: 15px;
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.2);
  font-size: 2rem;
  height: 220px;
  overflow: hidden;
  position: relative;
  width: 370px;
}
Enter fullscreen mode Exit fullscreen mode

然后对于魔术部分，模糊效果我们使用另一个:before伪元素。



.card:before {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px) saturate(100%) contrast(45%) brightness(130%);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

整个神奇的模糊效果来自于此，backdrop-filter它赋予了它模糊的外观。
我们还使用了不透明度为 30% 的背景色（使用rgba光谱）。

对于里面的文本，我们只需要稍微偏移一下，并确保它位于所有内容之上。



.card__text {
  color: #6f7886;
  margin-left: 30px;
  margin-top: 100px;
  position: relative;
  z-index: 2;
}
Enter fullscreen mode Exit fullscreen mode

记住我们有 Visa SVG 标志，我们把它放在右下角。



.card svg {
  bottom: 30px;
  position: absolute;
  right: 30px;
}
Enter fullscreen mode Exit fullscreen mode

在我们讨论orbit动画之前，这个动画将使两个球围绕卡片以圆周运动的方式旋转。



@keyframes orbit {
  from {
    transform: rotate(0deg) translateX(100px) rotate(0deg);
  }
  to {
    transform: rotate(360deg) translateX(100px) rotate(-360deg);
  }
}
Enter fullscreen mode Exit fullscreen mode

这个特定的动画使用了两步动画，将元素从 0 度旋转到 360 度（一整圈）。
它还会偏移translateX轴使其移动。

完整的结果可以在 Codepen 上看到。

浏览器支持

该方法很大程度上依赖于backdrop-filter具有相当好支持的。

它可以在所有现代浏览器中安全使用，您可以利用它的所有前缀来获得更多支持。

CSS 背景滤镜支持

感谢您的阅读，让我们联系起来！

感谢您阅读我的博客。欢迎订阅我的电子邮件简报，并在Facebook或Twitter上与我联系。

文章来源：https://dev.to/dailydevtips1/css-frosted-glass-credit-card-3lak
Devto 翻译
PREV
使用 JavaScript 检测用户是否在线
NEXT
2020 年结束前，值得添加到你的投资组合中的 5 个全栈项目