div+css布局实现磨砂玻璃材质卡片文字效果代码-html代码-BFW代码库

div+css布局实现磨砂玻璃材质卡片文字效果代码

代码语言：html

代码描述：div+css布局实现磨砂玻璃材质卡片文字效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
<style>
    :root {
  --noise: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500"><filter id="fractalNoise" x="0" y="0"><feTurbulence type="fractalNoise" baseFrequency=".45" numOctaves="3" stitchTiles="stitch"/><feBlend mode="screen"/></filter><rect width="500" height="500" filter="url(%23fractalNoise)" opacity="0.5"/></svg>');
}


body {
  min-height: 100vh;
  margin: 0;
  font-family: system-ui, sans-serif;
  display: grid;
  place-content: center;
  background-color: #25282a;
}

.container {
  color: #fefefc;
  width: min(45ch, 100% - 2rem);
  margin: 0 auto;
  padding: 1rem;
  border: 1px solid #fff;
  border-radius: 0.75rem;
  background-color: #fff0;
  background-image: linear-gradient(52deg, rgba(73, 89, 95, 0.5), rgba(170, 188, 202, 0.15), 80%, rgba(225, 232, 234, 0.3)), linear-gradient(45deg, rgba(77, 87, 91, 0.3), rgba(197, 209, 211, 0.4) 70%), var(--noise);
  background-blend-mode: multiply;
  backdrop-filter: blur(0.3rem);
  box-shadow: inset 0 0 1.8em -0.36em #cdddea, 0 0.4rem 0.75rem #0002;
  tra.........完整代码请登录后点击上方下载按钮下载查看