Card by htwarriors108
#212121
1.card { 2 position: absolute; 3 width: 190px; 4 height: 254px; 5 border: 4px solid rgba(255, 255, 255, 0.3); 6 border-radius: 0.8em; 7 display: flex; 8 align-items: center; 9 justify-content: center; 10 cursor: pointer; 11 transition: 0.5s; 12 top: 50%; 13 left: 50%; 14 transform: translate(-50%, -50%); 15} 16 17.card:hover { 18 scale: 1.05; 19 rotate: 3deg; 20} 21 22.card::after { 23 content: ''; 24 width: 93%; 25 height: 95%; 26 position: absolute; 27 border-radius: 0.7em; 28 background-color: rgba(255, 255, 255, 0.1); 29 z-index: 0; 30} 31 32.shadow { 33 width: 100%; 34 height: 100%; 35 background: linear-gradient(315deg, #03a9f4, #ff0058); 36 z-index: -1; 37 filter: blur(25px); 38} 39 40.txt { 41 position: absolute; 42 font-weight: 800; 43 font-size: 1.6em; 44 color: #fff; 45} 46 47.card:hover .shadow { 48 animation: rotate 3s linear infinite; 49} 50 51@keyframes rotate { 52 0% { 53 rotate: 0deg; 54 background: linear-gradient(315deg, #03a9f4, #ff0058); 55 } 56 57 50% { 58 rotate: 180deg; 59 background: linear-gradient(45deg, #ffbc00, #ff0058); 60 } 61 62 100% { 63 rotate: 360deg; 64 background: linear-gradient(315deg, #4dff03, #00d0ff); 65 } 66}
839 views
839 views
MIT License