涟漪水波效果-html代码-BFW代码库

涟漪水波效果

代码语言：html

所属分类：动画

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

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

    <title> Drop</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            width: 100%;
            height: 100%;
            font-size: 18px;
        }

        body {
            width: 100%;
            min-height: 100%;
            display: flex;
            background: #DADCE8;
            overflow: hidden;
        }

        .drop {
            position: relative;
            position: absolute;
            -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            width: 50vmin;
            height: 50vmin;
            border-radius: 50%;
            -webkit-filter: blur(1vmin);
            filter: blur(1vmin);
            box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
            border: 0 solid #DADCE8;
            -webkit-animation: expand 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
            animation: expand 4s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
        }
@-webkit-keyframes expand {
            0% {
                width: 0;
                height: 0;
                box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
                border: 0 solid rgba(218, 220, 232, 0.5);
            }
            5% {
                box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
                border: 2vmin solid rgba(218, 220, 232, 0.5);
            }
            90% {
                box-shadow: none;
                border: 2vmin solid rgba(218, 220, 232, 0.5);
            }
            100% {
                width: 100vmin;
                height: 100vmin;
                box-shadow: none;
                border: 0 solid rgba(218, 220, 232, 0.5);
            }
        }
@keyframes expand {
            0% {
                width: 0;
                height: 0;
                box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
                border: 0 solid rgba(218, 220, 232, 0.5);
            }
            5% {
                box-shadow: -5vmin -5vmin 5vmin #eaebf2, 5vmin 5vmin 5vmin #bbbed4, inset -5vmin -5vmin 5vmin #eaebf2, inset 5vmin 5vmin 5vmin #bbbed4;
                border: 2vmin solid rgba(218, 220, 232, 0.5);
            }
            90% {
                box-shadow: none;
                border: 2vmin solid rgba(218, 220, 232, 0.5);
            }
            100% {
                width: 100vmin;
       .........完整代码请登录后点击上方下载按钮下载查看