css布局实现冰雪文字效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现冰雪文字效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">





    <style>
        @import url('https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap');
        *{
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        
        body{
          height: 100vh;
          background-image: var(--snowBackground);
          background-size: cover;
          background-position: center;
        }
        .content{
          width: 100%;
          height: 100%;
          display:flex;
          justify-content: center;
          align-items: center;
        }
        .iced-text{
          font-family: 'Fredoka One', cursive;
          font-size: 12vmin;
          text-align: center;
          line-height: .8em;
          position:relative;
          letter-spacing: -0.02em;
        }
        @media (orientation: landscape) {
          .iced-text {
            font-size: 12vmax;
          }
        }
        .iced-text-back{
          position: absolute;
          top: 0;
          left: 0;
          color: white;
          z-index: -1;
          -webkit-text-stroke: 0.1em white;
          filter:drop-shadow(0 0 0.05em #0c6dbd);
        }
        .iced-text-front{
          background: #0c6dbd;
          background-image: var(--iceTexture);
          color: transparent;
          background-clip: text;
          -webkit-background-clip: text;
        }
        #canvas{
          position: absolute;
        }
        
 
        :root{
          --snowBackground: url('//repo.bfw.wiki/bfwrepo/image/600d6e3cb8d5d.png');
          --iceTexture: url('data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看