css文本立体效果

DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本立体效果title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #808080;
      }
      h1 {
        text-align: center;
        font-size: 120px;
        font-weight: 700;
        position: relative;
        font-family: "Montserrat";
        color: #fff;
      }
      h1::before {
        content: "DARKNESS";
        position: absolute;
        color: #000;
        transform: translate(-50px, 21px) scaleY(0.5) skew(50deg);
        z-index: -1;
        /* 滤镜 */
        filter: blur(5px);
        /* 渐变 */
        mask-image: linear-gradient(transparent, #000);
        -webkit-mask-image: linear-gradient(transparent, #000);
      }
    style>
  head>
  <body>
    <h1>DARKNESSh1>
  body>
html>

css文本立体效果_第1张图片

你可能感兴趣的:(css,前端)