css布局实现文字被抠出纸片效果代码

代码语言:html

所属分类:布局界面

代码描述:css布局实现文字被抠出纸片效果代码

代码标签: 文字 抠出 纸片 效果

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

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

<head>

    <meta charset="UTF-8">

    <link href="https://fonts.googleapis.com/css2?family=Titillium+Web:wght@900&display=swap" rel="stylesheet">



    <style>
:root {
        --hs: 225, 100%;
        --paper: hsl(var(--hs),25%);
        --highlight: hsl(var(--hs),45%);
        --shadow: hsl(var(--hs),15%);
    }

        h1 {
            font-family: "Titillium Web", sans-serif;
            font-size: clamp(8rem, 23vw + 1rem, 20rem);
            letter-spacing: 0.1em;
            display: grid;
            place-items: center;
            grid-template-areas: "text";
            -webkit-background-clip: text;
            color: transparent;
            background-image: linear-gradient.........完整代码请登录后点击上方下载按钮下载查看

网友评论0