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

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

代码语言：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/qgGWJEMFm2PJVYJKXCTMLYT0ztLRHRczBRMxspSM8IRLjxNQ4Z7yZA4D1Wfx2WCHZ563Y1CMqBBtB7ptYu7RiNKrEmkK3kqFbfB43iMw9F1R181lBwthN6h52AoVyQ9iBLfOmgOp7y/SNLo6pzUhZ0YOX9kNyyZr6Z+XmnIdoCHsr6bwDF3vYqBqjRZIeGr4n1xXdnOo8vFWge6mmZrbqI2Tq1UQNjNgz/EU6X8DFgwAAARiUlEQVR42u1d90MXRxbfU4giShEFBKRIEEFBUAxiBUWw94ZYsPfeYo/GEo0ajb1GY9eY2NK9qCmm93Zpl3Yl5frNH3DfL8jpzpudfTPzvusvecGI3++Unfns629nLRYAyhp3f52xUw8tnrx6ytSfX1v5aiL7jUgpdvzDW+rGDG1xumH08nmv7Lhn+6NBoI0VGnKbEvz/M5y08MlmLSyeti7ZFWYwZvbtq8NeYegd7X2/JnCrTFG/iBBuiCA4o9IUhSF2wm5Q2KQlm8EGWz1WROXttl2SVYtvY4Rr7sIelph6f1FLd9CUJ+xDjUf0qW3JqeKdls1nrOyYj76IIH6EGlwDfiPPuQz4O679PajLuNg8yXlRrV/unnUb2dqEyLYdKt3Nqev0hl3AjfMHAmSraWK9GgFCNr6rGrI1ERdx70TXBR3KSyTn2eL1rtNOyNcZeAc3yglEn1oWmk7cjCjVQDbYbcZ58gFbKvPs0umo9aR+XEbKs5FrmyJmTTrQRn1ooLe7kiLro4K29DxrWRGk0jjycDh6PaMJeXbBMeSk0bmqQweDMfLopHE1xZSR86w1klIav9dCYTVDyXi28YsK0zZXNJPzoMKm5lk/lcRS86w1iYxnE44rrWUCFbLZc5TmXRWnNPpZOEJsAJC12uVF0vKstb+USM8mblZbyigiZENWKO7hycYKo18WDNAhEMha1tk0A2RF8v8BGp492l9xIXk0yMZOUd7COdn44bsL+s8j17NV9PtL+tJYNOOxNhR6Nr+F6jrakiB76ZjGFk7Eh7rmCboPDAsIz/qM5DOkyFrfEPBs8WrlZYyhsI3zP9HawugEbDDte1H39wKErFVRRorswTBjnn2sk/oqmhAgm1GguYX.........完整代码请登录后点击上方下载按钮下载查看