TweenMax实现圣诞loading加载进度条效果代码-html代码-BFW代码库

TweenMax实现圣诞loading加载进度条效果代码

代码语言：html

所属分类：进度条

代码描述：TweenMax实现圣诞loading加载进度条效果代码

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

<html>
<head>
    <meta charset="utf-8">


    <style type="text/css">
        body {
            background-color: #111;
            overflow: hidden;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body,
        html {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        svg {
            width: 100%;
            height: 100%;
            visibility: hidden;
        }

    </style>
</head>
<body>
    <svg class="mainSVG" viewBox="0 0 600 600" xmlns="http://www.w3.org/2000/svg">
        <defs>
            <clipPath id="gradMask">
                <rect id="grad" x="100" y="280" width="400" height="36" rx="18" ry="18" />
            </clipPath>
            <pattern id="gradPattern" width="400" height="36" x="0" y="0" patternUnits="userSpaceOnUse">
                <rect id="grad" x="0" y="0" fill="url(#xmasGrad)" width="400" height="36" />
            </pattern>
            <filter id="drop" x="-150%" y="-150%" width="280%" height="280%">
                <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0" />
                <feGaussianBlur in="offOut" stdDeviation="19" result="blur" />
                <feComponentTransfer>
                    <feFuncA type="linear" slope="0.5" />
                </feComponentTransfer>
                <feComposite in="SourceGraphic" operator="over" />
            </filter>
        </defs>
        <linearGradient id="xmasGrad" gradientUnits="userSpaceOnUse" x1="0" y1="100" x2="400" y2="100">
            <stop offset="0" style="stop-color:#F2F6F6" />
            <stop offset="0.1" style="stop-color:#F2F6F6" />
            <stop offset="0.1" style="stop-color:#AF0404" />
            <stop offset="0.2" style="stop-color:#AF0404" />
            <stop offset="0.2" style="stop-color:#F2F6F6" />
            <stop offset="0.3" style="stop-color:#F2F6F6" />
            <st.........完整代码请登录后点击上方下载按钮下载查看