Card by vikas7754
This card was created for One <div> challenge
#e8e8e8
1.one-div { 2 position: relative; 3 width: 150px; 4 height: 150px; 5 background: transparent; 6 border-radius: 57% 43% 37% 63% / 45% 52% 48% 52%; 7 box-shadow: inset 10px 10px 10px rgba(0, 0, 0, 0.05), 8 15px 25px 10px rgba(0, 0, 0, 0.1), 9 15px 20px 20px rgba(0, 0, 0, 0.05), 10 inset -10px -10px 15px rgba(237, 237, 237, 0.9); 11 animation: anim 1s infinite alternate; 12} 13 14.one-div:before { 15 content: ''; 16 position: absolute; 17 left: 25px; 18 top: 35px; 19 width: 20px; 20 height: 20px; 21 border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%; 22 background: #FFF 23} 24 25.one-div:after { 26 content: ''; 27 position: absolute; 28 left: 60px; 29 top: 25px; 30 width: 10px; 31 height: 10px; 32 border-radius: 42% 58% 37% 63% / 40% 43% 57% 60%; 33 background: #ffffff 34} 35 36@keyframes anim { 37 0% { 38 transform: translateY(0); 39 height: 150px; 40 width: 150px; 41 } 42 43 100% { 44 transform: translateY(40px); 45 height: 135px; 46 width: 160px; 47 } 48}
1.5K views
1.5K views
pangqiang 18. January at 13:06
18. January at 13:06
so cool !
vikas7754 18. January at 13:44
18. January at 13:44
@pangqiang Thank You!
MIT License