css+js实现重叠字符字母和阴影效果代码
代码语言:html
所属分类:布局界面
代码描述: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