Card by nanda248
#212121
1.main { 2 position: relative; 3} 4 5/* card styles */ 6.card { 7 position: relative; 8 overflow: hidden; 9 display: grid; 10 grid-template-columns: 1fr 1fr 1fr; 11 grid-template-rows: 1fr 1fr 1fr; 12 grid-auto-flow: row; 13 grid-template-areas: 14 "i1 . ." 15 ". center ." 16 ". . i2"; 17 width: 12em; 18 height: 18em; 19 border-radius: 4px; 20 background: #ffd700; 21 transition: 0.5s; 22 z-index: 20; 23} 24 25.bg-card-1 { 26 background-color: #daa520; 27 position: absolute; 28 top: 0; 29 width: 12em; 30 height: 18em; 31 border-radius: 4px; 32 transition: 0.5s; 33 z-index: 8; 34} 35 36.bg-card-2 { 37 background-color: #b8860b; 38 position: absolute; 39 top: 0; 40 width: 12em; 41 height: 18em; 42 border-radius: 4px; 43 transition: 0.5s; 44 z-index: 4; 45} 46 47/* glider animation */ 48.card:before { 49 content: ""; 50 position: absolute; 51 height: 130%; 52 width: 0.6em; 53 background-color: aliceblue; 54 opacity: 0.3; 55 animation: glider 1.8s infinite linear; 56 animation-delay: 0.05s; 57} 58 59.card:after { 60 content: ""; 61 position: absolute; 62 height: 130%; 63 width: 0.4em; 64 background-color: aliceblue; 65 opacity: 0.2; 66 animation: glider 1.8s infinite linear; 67} 68 69@keyframes glider { 70 0% { 71 transform: rotate(45deg) translate(-140px, -140px); 72 } 73 74 100% { 75 transform: rotate(45deg) translate(220px, -40px); 76 } 77} 78 79/* icon styles */ 80.i1, 81.i2 svg { 82 width: 1.5em; 83 fill: #ff3131; 84} 85 86.i1 { 87 grid-area: i1; 88 justify-self: flex-start; 89 display: flex; 90 flex-direction: column; 91 justify-content: flex-start; 92 align-items: center; 93 margin: 0.2em 0.4em; 94} 95 96.i2 { 97 grid-area: i2; 98 justify-self: flex-end; 99 display: flex; 100 flex-direction: column; 101 justify-content: flex-start; 102 align-items: center; 103 margin: 0.2em 0.4em; 104 transform: rotate(180deg); 105} 106 107.corner-text { 108 color: #ff3131; 109 font-weight: bold; 110 font-size: 1.2em; 111} 112 113.center-shape { 114 grid-area: center; 115 display: flex; 116 justify-content: center; 117 align-items: center; 118} 119 120.center-shape svg { 121 width: 4em; 122 fill: #ff3131; 123} 124 125/* hover effects */ 126.card:hover { 127 box-shadow: #ffd700 0px 7px 29px 0px; 128 cursor: pointer; 129} 130 131.card:hover:after, 132.card:hover:before { 133 visibility: hidden; 134} 135 136.card:hover svg, 137.card:hover span { 138 animation: color-change 1s ease-in-out; 139 animation-fill-mode: forwards; 140} 141 142@keyframes color-change { 143 from { 144 fill: #ff3131; 145 color: #ff3131; 146 } 147 148 to { 149 fill: #e34234; 150 color: #e34234; 151 } 152} 153 154/* hover fan out effects */ 155.card:active { 156 transform: rotate(10deg); 157 transform-origin: bottom left; 158 box-shadow: none; 159} 160 161.card:active + .bg-card-1 { 162 transform: rotate(5deg); 163 transform-origin: bottom left; 164} 165
1.5K views
1.5K views
MIT License