Created
March 11, 2021 08:25
-
-
Save BloodCelebration/5af9c3a0906f5241a8c8d682f3280697 to your computer and use it in GitHub Desktop.
【css】Neumorphism_animation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body> | |
| <div class="container"> | |
| <div class="box"></div> | |
| </div> | |
| </body> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin:0; | |
| padding:0; | |
| } | |
| .container { | |
| background: #f0f0f0; | |
| box-sizing: border-box; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| width: 100vw; | |
| height: 100vh; | |
| } | |
| .box { | |
| border-radius: 20px; | |
| width: 60px; | |
| height: 60px; | |
| background: #f0f0f0; | |
| box-shadow: 0 0 0 #cccccc, | |
| 0 0 0 #ffffff, | |
| 10px 10px 10px #cccccc inset, | |
| -10px -10px 10px #ffffff inset; | |
| animation: anime 3s cubic-bezier(0.16, 1, 0.3, 1) 1s infinite alternate; | |
| /* animation-fill-mode: forwards; */ | |
| } | |
| @keyframes anime { | |
| 0% { | |
| width: 60px; | |
| height: 60px; | |
| background: #f0f0f0; | |
| box-shadow: 0 0 0 #cccccc, | |
| 0 0 0 #ffffff, | |
| 10px 10px 10px #cccccc inset, | |
| -10px -10px 10px #ffffff inset; | |
| } | |
| 25% { | |
| width: 60px; | |
| height: 60px; | |
| background: #f8f8f8; | |
| box-shadow: 10px 10px 10px #cccccc, | |
| 10px 10px 10px #ffffff, | |
| 0 0 0 #cccccc inset, | |
| 0 0 0 #ffffff inset; | |
| } | |
| 50% { | |
| width: 60px; | |
| height: 240px; | |
| background: #f8f8f8; | |
| box-shadow: 10px 10px 10px #cccccc, | |
| 10px 10px 10px #ffffff, | |
| 0 0 0 #cccccc inset, | |
| 0 0 0 #ffffff inset; | |
| } | |
| 100% { | |
| width: 480px; | |
| height: 240px; | |
| background: #fafafa; | |
| box-shadow: 40px 40px 40px #cccccc, | |
| 0 0 0 #ffffff, | |
| 0 0 0 #cccccc inset, | |
| 2px 2px 2px #ffffff inset; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment