css water filling effect | css animation | css loading blogspot

css water filling effect

website: here

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <h1>DUCKY</h1>
    </div>
</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@500&display=swap');

body{
    display: flex;
    justify-content: center;
    font-family: 'Rubik', sans-serif;
}

.container{
    border: 2px solid gray;
    margin-top: 10vh;
    width: 70vh;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.container::before{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: -1;
    animation: ani 7s linear infinite;
    background-color: aqua;
}

h1 {
    font-size: 15vh;
}

@keyframes ani{
    0%{
        clip-path: polygon(0 90%, 9% 93%, 18% 95%, 29% 94%,
 39% 93%, 51% 93%, 62% 94%, 73% 95%, 85% 95%, 100% 93%,
 100% 100%, 0% 100%);
    }
    10%{
        clip-path: polygon(0 86%, 8% 89%, 17% 90%, 26% 89%,
 37% 88%, 48% 89%, 61% 89%, 74% 87%, 88% 86%, 100% 86%,
 100% 100%, 0% 100%);
    }
    20%{
        clip-path: polygon(0 70%, 13% 73%, 23% 76%, 33% 81%,
 40% 84%, 51% 85%, 64% 84%, 76% 82%, 89% 78%, 100% 74%,
 100% 100%, 0% 100%);
    }
    30%{
        clip-path: polygon(0 66%, 11% 68%, 22% 69%, 33% 69%,
 45% 68%, 58% 70%, 68% 71%, 78% 70%, 89% 68%, 100% 65%,
 100% 100%, 0% 100%);
    }
    40%{
        clip-path: polygon(0 52%, 12% 60%, 24% 63%, 35% 64%,
 47% 63%, 57% 57%, 68% 54%, 81% 54%, 91% 57%, 100% 61%,
 100% 100%, 0% 100%);
    }
    50%{
        clip-path: polygon(0 43%, 14% 43%, 26% 45%, 36% 50%,
 47% 53%, 59% 53%, 70% 51%, 81% 50%, 91% 50%, 100% 51%, 
100% 100%, 0% 100%);
    }
    60%{
        clip-path: polygon(0 39%, 10% 42%, 23% 42%, 35% 41%,
 48% 39%, 60% 39%, 71% 40%, 83% 43%, 93% 44%, 100% 44%,
 100% 100%, 0% 100%);
    }
    70%{
        clip-path: polygon(0 33%, 11% 31%, 23% 32%, 36% 34%,
 50% 36%, 62% 37%, 73% 36%, 83% 35%, 92% 33%, 100% 31%,
 100% 100%, 0% 100%);
    }
    80%{
        clip-path: polygon(0 26%, 11% 27%, 20% 27%, 35% 25%,
 50% 23%, 61% 21%, 75% 21%, 85% 23%, 92% 26%, 100% 30%,
 100% 100%, 0% 100%);
    }
    90%{
        clip-path: polygon(0 6%, 15% 8%, 27% 11%, 38% 13%,
 49% 13%, 61% 11%, 72% 10%, 81% 9%, 91% 7%, 100% 3%, 
100% 100%, 0% 100%);
    }
    100%{
        clip-path: polygon(0 0, 14% 0, 24% 0, 33% 0, 47% 2%,
 59% 2%, 72% 3%, 80% 4%, 91% 4%, 100% 3%, 100% 100%,
 0% 100%);
    }
}

lazcoder

css water filling effect | css animation | css loading blogspot | aathil ducky

2 Comments