css文字三维渐变阴影效果代码-html代码-BFW代码库

css文字三维渐变阴影效果代码

代码语言：html

代码描述：css文字三维渐变阴影效果代码

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

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">



    <style>
        @import url("https://fonts.googleapis.com/css2?family=Exo+2:wght@300;700;900&display=swap");
        html,
        body {
          font-family: "Exo 2", sans-serif;
          background: #3fa1fb;
          background: linear-gradient(142deg, #3fa1fb 0%, #fc46a8 100%);
        }
        
        .header {
          max-width: 1200px;
          margin: 0 auto;
          padding: 1rem;
          display: flex;
          align-items: center;
          justify-content: center;
          height: calc(100vh - 4rem);
        }
        
        .title-wrapper {
          display: grid;
          align-items: center;
          justify-content: center;
          transform: skew(0, -10deg);
        }
        
        .top-title {
          order: 1;
          text-align: center;
          display: block;
          color: #fff;
          font-size: clamp(1rem, 4vw, 1.5rem);
          margin-bottom: 1rem;
          padding-right: 2rem;
        }
        
        .bottom-title {
          order: 3;
          text-align: center;
          display: block;
          color: #fff;
          font-size: clamp(1rem, 4vw, 1.5rem);
          margin-top: 2rem;
          padding-left: 2rem;
        }
        
        .sweet-title {
          order: 2;
          color: #fde9ff;
          font-weight: 900;
          text-transform: uppercase;
          font-size: clamp(3rem, 10vw, 6rem);
          line-height: 0.75em;
          text-align: center;
.........完整代码请登录后点击上方下载按钮下载查看