css实现文字结冰下雪动画效果-html代码-BFW代码库

css实现文字结冰下雪动画效果

代码语言：html

所属分类：动画

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>  Snowglobe -ish effect with Cheee by OhNoTypeCo</title>
    <style>
@font-face {
        src: url('http://repo.bfw.wiki/bfwrepo/fonts/Cheee_Variable.woff2');
        font-family:'Cheee';
        font-style: normal;
    }
    </style>
    <style>
        * {
            text-rendering: optimizeLegibility;
            -webkit-font-smoothing: antialiased;
        }

        html {
            height: 100%;
        }

        body {

            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Pimlico Glow';
            background-color: white;
            background-image: url(http://repo.bfw.wiki/bfwrepo/image/5dec78e074ef1.png);
            background-size: cover;
        }

        h1 {
            display: flex;
            align-items: center;
            justify-content: center;
            align-content: center;
            text-align: center;
            font-weight: 400;
            width: 100%;
            text-align: center;
            font-size: 23vw;
            color: rgba(255, 255, 255, 0.5);
            font-family: 'Cheee';
            font-variation-settings: 'YEST' 877, 'gvty' 500;
            -webkit-animation: gravity 50s linear forwards;
            animation: gravity 50s linear forwards;
        }
        h1::before {
            content: attr(data-text);
            position: absolute;
            z-index: 2;
            text-shadow: 8px 10px 10px rgba(255, 255, 255, 0.25), 10px 10px 6px rgba(203, 232, 236, 0.2), 8px 6px 6px rgba(255, 255, 255, 0.2), 4px 4px 6px rgba(30, 54, 64, 0.22), 0 0 6px rgba(0, 213, 255, 0.18);
            mix-blend-mode: multiply;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-image: url(http://repo.bfw.wiki/bfwrepo/icon/5dec790bb0702.png);
            background-repeat: repeat;
            background-size: 50%;
            -webkit-animation: snow    20s linear infinite;
            animation: snow    20s linear infinite;
        }
        h1::after {
            content: attr(data-text);
            position: absolute;
            z-index: 3;
            -webkit-back.........完整代码请登录后点击上方下载按钮下载查看