Card by htwarriors108
#212121
1.card { 2 background-color: #fff; 3 width: 190px; 4 height: 254px; 5 box-shadow: 0 0 0.5em rgba(255, 255, 255, 0.5); 6 border: 1px solid rgba(255, 255, 255, 0.6); 7 border-radius: 12px; 8 transition: 0.5s; 9 cursor: pointer; 10 transform: rotateX(-55deg) rotateY(15deg) rotateZ(60deg); 11 font-size: 2.2em; 12 font-weight: 800; 13 display: flex; 14 align-items: center; 15 justify-content: center; 16 color: #fff; 17} 18 19.card:active { 20 scale: 1.1; 21 rotate: 5deg; 22} 23 24@keyframes animate { 25 0% { 26 opacity: 0.3; 27 } 28 29 80% { 30 opacity: 1; 31 } 32 33 100% { 34 opacity: 0.3; 35 } 36} 37 38.card:hover { 39 transform: rotate(0deg); 40 opacity: 1; 41} 42 43.card, .card::before { 44 background: linear-gradient(43deg, rgb(65, 88, 208) 0%, rgb(200, 80, 192) 46%, rgb(255, 204, 112) 100%); 45} 46 47.card::before { 48 content: ''; 49 width: 120%; 50 height: 110%; 51 z-index: -1; 52 position: absolute; 53 top: 50%; 54 left: 50%; 55 border-radius: 15px; 56 transform: translate(-50%, -50%); 57 filter: blur(30px); 58 animation: animate 5s linear infinite; 59} 60
954 views
954 views
MIT License