css模拟液体下落动画效果-html代码-BFW代码库

css模拟液体下落动画效果

代码语言：html

所属分类：动画

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

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

    <title>  Liquid Drop using Gooey Effect</title>
    <style>
@import url("https://fonts.googleapis.com/css?family=Anton&display=swap");
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }

        svg {
            position: absolute;
        }

        .wrapper {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            background-color: #275EFE;
        }

        #container {
            height: 200px;
            width: 200px;
            margin: 300px auto;
            position: relative;
            filter: url(#goo);
        }
        #container .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-family: Anton;
            font-size: 200px;
            z-index: 999;
            color: white;
        }
        #container .drop {
            height: 30px;
            width: 30px;
            border-radius: 15px;
            background-color: white;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(120%, -800%) scaleX(0.5);
            animation: move  6s cubic-bezier(1, 0.04, 0.74, 0.2) infinite;
        }

@keyframes move {.........完整代码请登录后点击上方下载按钮下载查看