CSS3 Floating Image Animation Using Pure CSS

June 24, 2021

 Code is here for Floating Image


<style>
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body{
        background-color: #2a2a2a;
    }
    .wrapper{
        display: flex;
        min-height: 100vh;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    img{
       width: 100%;
       height: auto;
    }
    .avatar{
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 3px solid white;
        overflow: hidden;
        /* box-shadow: 1px 3px 1px white; */
        /* transform: translateY(0px); */
        animation: float 3s ease-in-out infinite;
    }
    h1{
        color: white;
    }
    @keyframes float {
        0%{
            transform: translateY(0px);
            box-shadow: 0px 2px 4px 0px white;
        }
        50%{
            transform: translateY(-20px);
            box-shadow: 0px 5px 10px 0px rgb(218, 198, 198);;
        }
        100%{
            transform: translateY(0px);
            box-shadow: 0px 2px 4px 0px white;
        }
    }
</style>
<body>
    <div class="wrapper">
        <div class="avatar">
            <img src="avatar.png" alt="" srcset="">
        </div>
        <div class="text">
            <h1>Ruhul Amin</h1>
        </div>
    </div>
</body>