Card by KhaledMatalkah
#212121
1.card { 2 width: 254px; 3 height: 300px; 4 background: linear-gradient(180deg, #5b1577, #a52585); 5 border-radius: 10%; 6 box-shadow: -35px 35px 70px #891883, 10px -35px 70px #db26db; 7 position: relative; 8 overflow: hidden; 9 transition: transform 0.3s ease; 10 animation: shadowAnimation 5s infinite ease-in-out; 11} 12 13@keyframes shadowAnimation { 14 0% { 15 box-shadow: -35px 35px 70px #ca21ae, 10px -35px 70px #ca21ae; 16 } 17 18 50% { 19 box-shadow: -20px 10px 50px #bd3fa2, 0 -20px 50px #b9317c; 20 } 21 22 100% { 23 box-shadow: -35px 35px 70px #ca27af, 10px -35px 70px #bd3fa2; 24 } 25} 26 27.card::before { 28 content: ""; 29 position: absolute; 30 top: 50%; 31 left: 50%; 32 transform: translate(-50%, -50%); 33 width: 150px; 34 height: 150px; 35 background: radial-gradient(circle, #68057c, #a52574); 36 border-radius: 50%; 37 opacity: 0.6; 38 transition: opacity 0.3s ease; 39} 40 41.card::after { 42 content: ""; 43 position: absolute; 44 top: 50%; 45 left: 50%; 46 transform: translate(-50%, -50%); 47 width: 80px; 48 height: 80px; 49 background: radial-gradient(circle, #b700ff, #be268b, transparent); 50 border-radius: 50%; 51 opacity: 0.2; 52 transition: opacity 0.3s ease; 53} 54 55.card:hover { 56 transform: scale(1.1); 57} 58 59.card:hover::before, 60.card:hover::after { 61 opacity: 1; 62} 63
461 views
461 views
MIT License