7.7K views
1.card { 2 width: 190px; 3 height: 254px; 4 transition: all 0.2s; 5 position: relative; 6 cursor: pointer; 7} 8 9.card-inner { 10 width: inherit; 11 height: inherit; 12 background: rgba(255,255,255,.05); 13 box-shadow: 0 0 10px rgba(0,0,0,0.25); 14 backdrop-filter: blur(10px); 15 border-radius: 8px; 16} 17 18.card:hover { 19 transform: scale(1.04) rotate(1deg); 20} 21 22.circle { 23 width: 100px; 24 height: 100px; 25 background: radial-gradient(#b0e633, #53ef7d); 26 border-radius: 50%; 27 position: absolute; 28 animation: move-up6 2s ease-in infinite alternate-reverse; 29} 30 31.circle:nth-child(1) { 32 top: -25px; 33 left: -25px; 34} 35 36.circle:nth-child(2) { 37 bottom: -25px; 38 right: -25px; 39 animation-name: move-down1; 40} 41 42@keyframes move-up6 { 43 to { 44 transform: translateY(-10px); 45 } 46} 47 48@keyframes move-down1 { 49 to { 50 transform: translateY(10px); 51 } 52}
MIT License