Fish Tank Animation

Home / Web Code Snippet / Fish Tank Animation

Fish Tank Animation

https://youtube.com/shorts/3yRMxcWCdv4?si=t2Qlle2OsPkGlEfS

HTML CODE:-

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title></title>
</head>
<body>
<div class="container">
    <div class="water">
        <i class="fa-solid fa-otter"></i>
    </div>
</div>
</body>
</html>

CSS CODE:-

body{
            padding: 0px;
            margin: 0px;
            min-height: 100vh;
            background: black;
        }
        .container{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 250px;
            height: 250px;
            background: #333;
            border-radius: 50%;
            border: 4px solid white;
            transform-origin: bottom center;
            animation: container 5s linear infinite;
        }
        @keyframes container{
            0%{
                transform: translate(-50%,-50%) rotate(0deg);
            }
            25%{
                transform: translate(-50%,-50%) rotate(10deg);
            }
            50%{
                transform: translate(-50%,-50%) rotate(0deg);
            }
            70%{
                transform: translate(-50%,-50%) rotate(-10deg);
            }
            100%{
                transform: translate(-50%,-50%) rotate(0deg);
            }
        }
        .container::before{
            content: "";
            position: absolute;
            top: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 40%;
            height: 30px;
            background: #333;
            border: 4px solid white;
            border-radius: 50%;
        }
        .water{
            position: absolute;
            top: 50%;
            left: 2px;
            right: 2px;
            bottom: 2px;
            background: skyblue;
            border-bottom-right-radius: 150px;
            border-bottom-left-radius: 150px;
        }
        .water i{
            margin-top: 10px;
            font-size: 50px;
            color: black;
            filter: drop-shadow(0px 0px 10px orange);
            animation: animate 5s linear infinite;
        }
        @keyframes animate{
            0%{
                transform: translate(0,0) rotateY(180deg);
            }
            50%{
                transform: translate(150px,0) rotateY(180deg);
            }
            51%{
                transform: translate(150px,0) rotateY(0deg);
            }
            100%{
                transform: translate(0,0) rotateY(0deg);
            }
        }