css+js实现重叠字符字母和阴影效果代码

代码语言:html

所属分类:布局界面

代码描述:css+js实现重叠字符字母和阴影效果代码

代码标签: css js 重叠 字符 字母 阴影

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

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

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

  
  
<style>
html { 
  color-scheme: dark;
}
h1 {
  text-align: center;
  font-size: 16vmin;
  font-family: system-ui, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
}
.overlap{
  --overlap: .25ch;
  --shadow-offset: .125ch;
  --shadow-spread: .25ch;
  --shadow-color: black;
  letter-spacing: calc(var(--overlap) * -1); 
  isolation: isolate;
}
.overlap-front { --mult: 1; }
.overlap-back { --mult: -1; }
.overlap>span { 
  position: relative;
  z-index: calc(var(--index, 1) * var(--mult, 1));
}
.overlap-front>span:not(:first-of-type),
.overlap-back>span:not(:last-of-type){
  text-shadow: 
    calc(var(--mult, 1.........完整代码请登录后点击上方下载按钮下载查看

网友评论0