NeumorphismUI Animation
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
Please Login to comment...