Skip to content
Related Articles

Related Articles

NeumorphismUI Animation
  • Last Updated : 23 Dec, 2020
GeeksforGeeks - Summer Carnival Banner

NeumorphismUI is a modern soft UI used in designing web elements, frames, and screens and is also a relatively new design trend that achieved great popularity these days. Its aesthetic is marked by minimal and real-looking UI that’s sort of a re-advancement of the old SkeuomorphismUI design trend.

HTML code:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="index.css">
</head>
  
<body>
    <div class="container">
        <div class="anime"></div>
    </div>
</body>
  
</html>

index.css: The following is the code for file “index.css” which is used in the above HTML code.




<style>
    .container {
        background: #f2f2f2;
        box-sizing: border-box;
        display: grid;
        place-items: center;
        width: 100vw;
        height: 100vh;
    }
  
    .anime {
        border-radius: 999px;
        width: 50px;
        height: 50px;
        background: #f2f2f2;
        box-shadow: 0 0 0 #ddd,
            0 0 0 #fff,
            10px 10px 10px #ddd inset,
            -10px -10px 10px #fff inset;
  
        /* Adding Animations */
        animation: gfg 5s cubic-bezier(0.16
            1, 0.3, 1) 1s infinite alternate;
    }
  
    @keyframes gfg {
        0% {
            width: 60px;
            height: 60px;
            background: #f2f2f2;
            box-shadow: 0 0 0 #ddd,
                0 0 0 #fff,
                10px 10px 10px #ddd inset,
                -10px -10px 10px #fff inset;
        }
  
        25% {
            width: 60px;
            height: 60px;
            background: #fcfcfc;
            box-shadow: 10px 10px 10px #ddd,
                10px 10px 10px #fff,
                0 0 0 #cccccc inset,
                0 0 0 #fff inset;
        }
  
        50% {
            width: 60px;
            height: 160px;
            background: #fcfcfc;
            box-shadow: 10px 10px 10px #ddd,
                10px 10px 10px #fff,
                0 0 0 #ddd inset,
                0 0 0 #fff inset;
        }
  
        100% {
            width: 556px;
            height: 77px;
            /* background: #fefefe; */
            background: url(
https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200817185016/gfg_complete_logo_2x-min.png);
            box-shadow: 40px 40px 40px #ddd,
                0 0 0 #fff,
                0 0 0 #ddd inset,
                2px 2px 2px #fff inset;
        }
    }
</style>

Output:



Supported Browsers:

  • Google Chrome
  • Edge
  • Mozilla Firefox
  • Opera
  • Safari

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :