Card by xantha01
#212121
1.container { 2 position: relative; 3 width: 225px; 4 height: 325px; 5 cursor: pointer; 6} 7 8.card { 9 position: absolute; 10 inset: 2.5px; 11 border-radius: 10px; 12 transform-origin: bottom left; 13 transition: 0.3s ease; 14 display: flex; 15 flex-direction: column; 16 align-items: center; 17 justify-content: center; 18 color: #f1f4f7; 19 font-weight: bold; 20 text-shadow: 1px 1px 1px rgba(0, 0, 0, 1); 21} 22 23.container:hover .card:nth-child(1) { 24 animation: cardAnimation1 4s 0.5s infinite ease; 25} 26 27.container:hover .card:nth-child(2) { 28 animation: cardAnimation2 4s 1s infinite ease; 29} 30 31.container:hover .card:nth-child(3) { 32 animation: cardAnimation3 4s 1.5s infinite ease; 33} 34 35.container:hover .card:nth-child(4) { 36 animation: cardAnimation4 4s 2s infinite ease; 37} 38 39.card:nth-child(1) { 40 background: linear-gradient(0deg, #4776e6 0%, #8e54e9 100%); 41} 42 43.card:nth-child(2) { 44 background: linear-gradient(0deg, #b3ffab 0%, #12fff7 100%); 45 opacity: 0; 46} 47 48.card:nth-child(3) { 49 background: linear-gradient(178deg, #ffb99a 0%, #ffdbc5 100%); 50 opacity: 0; 51} 52 53.card:nth-child(4) { 54 background: linear-gradient(178deg, #606c88 0%, #3f4c6b 100%); 55 opacity: 0; 56} 57 58@keyframes cardAnimation1 { 59 0% { 60 transform: rotateZ(0deg); 61 opacity: 0; 62 z-index: -1; 63 } 64 65 25% { 66 transform: rotateZ(-20deg); 67 opacity: 1; 68 z-index: 0; 69 } 70 71 50% { 72 transform: rotateZ(0deg); 73 z-index: 1; 74 opacity: 1; 75 } 76 77 75% { 78 transform: rotateZ(20deg); 79 z-index: 0; 80 opacity: 1; 81 } 82 83 100% { 84 transform: rotateZ(0deg); 85 z-index: -1; 86 opacity: 0; 87 } 88} 89 90@keyframes cardAnimation2 { 91 0% { 92 transform: rotateZ(0deg); 93 z-index: -1; 94 opacity: 0; 95 } 96 97 45% { 98 transform: rotateZ(-15deg); 99 z-index: 0; 100 opacity: 1; 101 } 102 103 60% { 104 transform: rotateZ(0deg); 105 z-index: 1; 106 opacity: 1; 107 } 108 109 75% { 110 transform: rotateZ(15deg); 111 z-index: 0; 112 opacity: 1; 113 } 114 115 100% { 116 transform: rotateZ(0deg); 117 z-index: -1; 118 opacity: 0; 119 } 120} 121 122@keyframes cardAnimation3 { 123 0% { 124 transform: rotateZ(0deg); 125 z-index: -1; 126 opacity: 0; 127 } 128 129 45% { 130 transform: rotateZ(-20deg); 131 z-index: 0; 132 opacity: 0; 133 } 134 135 60% { 136 transform: rotateZ(0deg); 137 z-index: 1; 138 opacity: 1; 139 } 140 141 75% { 142 transform: rotateZ(20deg); 143 z-index: 0; 144 opacity: 1; 145 } 146 147 100% { 148 transform: rotateZ(0deg); 149 z-index: -1; 150 opacity: 0; 151 } 152} 153 154@keyframes cardAnimation4 { 155 0% { 156 transform: rotateZ(0deg); 157 z-index: 0; 158 opacity: 0; 159 } 160 161 35% { 162 transform: rotateZ(-25deg); 163 z-index: 0; 164 opacity: 0.0; 165 } 166 167 75% { 168 transform: rotateZ(0deg); 169 z-index: 1; 170 opacity: 1; 171 } 172 173 90% { 174 transform: rotateZ(25deg); 175 z-index: 0; 176 opacity: 1; 177 } 178 179 100% { 180 transform: rotateZ(0deg); 181 z-index: 0; 182 opacity: 0; 183 } 184} 185 186
593 views
593 views
MIT License