css实现文字阴影层叠效果代码-html代码-BFW代码库

css实现文字阴影层叠效果代码

代码语言：html

代码描述：css实现文字阴影层叠效果代码

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

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
body {
  display: grid;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  width: 100%;
}

.album {
  --lh: 1lh;
  --height: calc(var(--lh) * 10);
  
  background-image: radial-gradient(circle at 50%, hsl(134 5% 47% / .75) 20%, transparent 80%), linear-gradient(135deg, hsl(204 70% 43% / .75), hsl(100 10% 45% / .75)), url("https://assets.codepen.io/9632/linen-2.webp");
  background-size: cover;
  display: grid;
  place-items: center;
  position: relative;
}

.cover {
  display: grid;
  line-height: var(--lh);
  inset-block-end: calc(var(--lh) * 1.5);
  position: relative;
  transform: rotate(135deg);
  transform-origin: 42% 60%;
  width: 100%;
}

.bar {
  overflow: hidden;
  height: var(--height);
  inset-block-end: 50%;
  position: relative;
  width: 150%;
}
.bar::after {
  content: "";
  aspect-ratio: .75 / 1;
  background-color: hsl(0 0% 0% / .75);
  filter: blur(50px);
  inset-bl.........完整代码请登录后点击上方下载按钮下载查看