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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.........完整代码请登录后点击上方下载按钮下载查看