NeumorphismUI Animation
Last Updated :
23 Dec, 2020
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 : 100 vw;
height : 100 vh;
}
.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 ;
animation: gfg 5 s cubic-bezier( 0.16 ,
1 , 0.3 , 1 ) 1 s 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 : url (
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
Share your thoughts in the comments
Please Login to comment...