Card by yaroslavas2001
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 padding: 20px 10px; 3 border-radius: 10%; 4 height: 280px; 5 width: 250px; 6 display: flex; 7 flex-direction: column; 8 align-items: center; 9 color: white; 10} 11 12.card::before, 13.card::after { 14 content: ''; 15 position: absolute; 16 z-index: -1; 17 filter: blur(29px); 18 border-radius: 50%; 19} 20 21.card::before { 22 border: 30px dashed #2061c2; 23 width: 200px; 24 height: 250px; 25 bottom: 90px; 26 animation: 11s linear 0s normal none infinite running borderBefore; 27} 28 29.card::after { 30 border: 30px dashed #9238BD; 31 width: 250px; 32 height: 200px; 33 animation: 9s linear 0s normal none infinite running borderAfter; 34} 35 36.heading { 37 font-weight: bold; 38 text-align: center; 39 color: #F2F2F2; 40} 41 42.heading span { 43 letter-spacing: 4px; 44 line-height: 25px; 45} 46 47.content { 48 height: 100%; 49 width: 100%; 50 display: flex; 51 flex-direction: column; 52 padding: 10px; 53 position: relative; 54} 55 56.content::before { 57 content: ''; 58 font-size: 15px; 59 position: absolute; 60 filter: blur(19px); 61 border-radius: 50%; 62 border: 15px dashed #6f21a3; 63 width: 100px; 64 height: 150px; 65 top: 0px; 66 left: 50px; 67 z-index: -1; 68 animation: 11s linear 0s normal none infinite running borderAfter; 69} 70 71@keyframes borderBefore { 72 0% { 73 transform: rotate(360deg); 74 } 75 76 100% { 77 transform: rotate(0deg); 78 } 79} 80 81@keyframes borderAfter { 82 0% { 83 transform: rotate(0deg); 84 } 85 86 100% { 87 transform: rotate(360deg); 88 } 89} 90 91.item { 92 height: 100%; 93 width: 100%; 94 display: flex; 95 justify-content: center; 96 align-items: center; 97 text-align: center; 98 cursor: pointer; 99} 100 101.item svg { 102 margin-right: 10px; 103} 104 105.item { 106 position: relative; 107 transition: opacity .5s ease-out; 108} 109 110.item:hover { 111 font-weight: bold; 112} 113 114.item::before, 115.item::after { 116 opacity: 0; 117 width: 5px; 118 height: 5px; 119 border-radius: 20px; 120 position: absolute; 121 background: rgba(255, 255, 255, 0.3); 122 box-shadow: 10px 10px 17px 20px rgba(255, 255, 255, 0.3); 123 transition: opacity .5s ease-out; 124 animation: 8s linear 0s normal none infinite running item; 125} 126 127@keyframes item { 128 0% { 129 transform: translateX(0px) translateY(0px); 130 } 131 132 25% { 133 transform: translateX(5px) translateY(-10px); 134 } 135 136 50% { 137 transform: translateX(10px) translateY(10px); 138 } 139 140 75% { 141 transform: translateX(5px) translateY(-10px); 142 } 143 144 100% { 145 transform: translateX(0px) translateY(0px); 146 } 147} 148 149.item::before { 150 left: 0px; 151 top: 10px; 152} 153 154.item::after { 155 right: 30px; 156 top: 10px; 157} 158 159.item--create::before { 160 content: 'π»'; 161} 162 163.item--create:hover::before { 164 opacity: 1; 165} 166 167.item--create:after { 168 content: 'π'; 169} 170 171.item--create:hover:after { 172 opacity: 1; 173} 174 175.item--post::before { 176 content: 'π'; 177} 178 179.item--post:hover::before { 180 opacity: 1; 181} 182 183.item--post:after { 184 content: 'π'; 185} 186 187.item--post:hover:after { 188 opacity: 1; 189} 190 191.item--inspire::before { 192 content: 'β¨'; 193} 194 195.item--inspire:hover::before { 196 opacity: 1; 197} 198 199.item--inspire:after { 200 content: 'π'; 201} 202 203.item--inspire:hover:after { 204 opacity: 1; 205} 206 207button { 208 background: transparent; 209 border: 0px; 210 border-radius: 20px; 211 padding: 10px 30px; 212 color: #fff; 213 font-weight: bold; 214 cursor: pointer; 215 position: relative; 216 animation: 0.9s linear 0s normal none infinite running button; 217 transition: all .5s ease-out; 218} 219 220button:hover { 221 letter-spacing: 1px; 222} 223 224@keyframes button { 225 0% { 226 border: 2px dotted rgba(73, 53, 247, 0.9); 227 } 228 229 100% { 230 border: 2px dashed rgba(120, 12, 243,0.9); 231 } 232} 233 234
Β
653 views
653 views
MIT License