Card by nanda248
#212121
1.card { 2 width: 11em; 3 height: 14.8em; 4 position: relative; 5 background: #28282B; 6 display: flex; 7 justify-content: center; 8 align-items: center; 9 border: 6px solid #F5F5DC; 10 border-radius: 5px; 11 transition: 0.5s; 12 overflow: hidden; 13} 14 15.card .circle { 16 width: 8em; 17 height: 14em; 18 border-radius: 50%; 19 transform: skew(-25deg); 20 border: 4px solid white; 21 display: grid; 22 grid-template-columns: 1fr 1fr; 23} 24 25.card .circle.small { 26 position: absolute; 27 width: 1.5em; 28 height: 3em; 29 border: 1px solid white; 30} 31 32.card .circle.top-left { 33 top: 0.3em; 34 left: 0.6em; 35} 36 37.card .circle.bottom-right { 38 bottom: 0.3em; 39 right: 0.6em; 40} 41 42.card:hover { 43 cursor: pointer; 44 transform: translate(0, -5px); 45} 46 47.card:hover:after, .card:hover:before { 48 visibility: hidden; 49} 50 51.card .circle span:nth-child(1) { 52 background-color: #FF2400; 53 border-top-left-radius: 100%; 54} 55 56.card .circle span:nth-child(2) { 57 background-color: #1F51FF; 58 border-top-right-radius: 100%; 59} 60 61.card .circle span:nth-child(3) { 62 background-color: #FFEA00; 63 border-bottom-left-radius: 100%; 64} 65 66.card .circle span:nth-child(4) { 67 background-color: #50C878; 68 border-bottom-right-radius: 100%; 69} 70 71/* glider animation */ 72.card:before { 73 content: ''; 74 position: absolute; 75 height: 130%; 76 width: 1em; 77 background-color: aliceblue; 78 opacity: 0.14; 79 animation: glider 1.8s infinite linear; 80 animation-delay: 0.05s; 81} 82 83.card:after { 84 content: ''; 85 position: absolute; 86 height: 120%; 87 width: 0.8em; 88 background-color: aliceblue; 89 opacity: 0.1; 90 animation: glider 1.8s infinite linear; 91} 92 93@keyframes glider { 94 0% { 95 transform: rotate(45deg) translate(-12em, 1.2em); 96 } 97 98 100% { 99 transform: rotate(45deg) translate(18em, -2.8em); 100 } 101}
772 views
772 views
MIT License