1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38
| body { width: 100%; height: 100vh; justify-content: center; align-items: center; background-color: #eee; color: slategray; display:flex; flex-wrap: wrap; }
.container { justify-content: center; position: relative; display: flex; flex-direction: column; align-items: center; margin: 20px; }
.container .box { width: 99px; height: 99px; box-shadow: 9px 9px 15px rgba(0, 0, 0, 0.1), -9px -9px 15px rgba(255, 255, 255, 1); border-radius: 15px; background-color: #eee; transition: box-shadow .2s ease-out; }
.container .box:hover { box-shadow: 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 rgba(255, 255, 255, 0.8), inset 9px 9px 15px rgba(0, 0, 0, 0.1), inset -9px -9px 15px rgba(255, 255, 255, 1); transition: box-shadow .2s ease-out; }
|