css实现文字装水水纹波纹动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现文字装水水纹波纹动画效果代码

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

<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>
        body {
            background: #141414;
            width: 100%;
            height: 100%;
        }

        .loading {
            text-transform: uppercase;
            font-family: 'Cabin Condensed', sans-serif;
            font-weight: bold;
            font-size: 100pt;
            text-align: center;
            height: 120px;
            line-height: 110px;
            vertical-align: bottom;
            position: absolute;
            left: 0;
            right: 0;
            top: 100px;
            bottom: 0;
            display: block;
        }

        .loading-2 {
            top: 300px;
            width: 473px;
            height: 97px;
            font-size: 0;
            background: rgba(255, 255, 255, 0.06);
            margin: 0 auto;
        }

        .ff {
            position: absolute;
            font-size: 12pt;
            top: -20px;
            color: white;
            line-height: 12pt;
        }

        .loading-2-text {
            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdkAAABhCAMAAACtdyucAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAALfUExURQAAABQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFEStTtwAAAD0dFJOUwBQ25f72pjX1u5y/FGO9QTQ9pZjYhsvPuyV9AHt8usLGvfkArDvBQpz8bhsIObwT/3PAxCS+bPlsR8NW6m5GfjzIvrc4NVq/qgGWJEMFm2PJVYJ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.........完整代码请登录后点击上方下载按钮下载查看