Card by FoxVidaan
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 max-width: 300px; 3 font-family: sans-serif; 4 color: white; 5 background: linear-gradient(-45deg, #7121A6, #520153, #044146, #04967b ); 6 background-size: 400% 400%; 7 animation: gradient 12s ease infinite; 8 padding: 2rem; 9 display: flex; 10 flex-direction: column; 11 gap: 1.5rem; 12 border-radius: 10px; 13} 14 15.heading { 16 position: relative; 17 overflow: hidden; 18 font-size: 1.2rem; 19 font-weight: 600; 20 text-align: center; 21 padding-bottom: 10px; 22} 23 24.heading span { 25 display: block; 26 margin-top: -0.5rem; 27 font-size: 2.7rem; 28 font-weight: 800; 29 -webkit-text-stroke: #fff 0.1rem; 30 letter-spacing: 0.2rem; 31 color: transparent; 32 position: relative; 33 /* top: 10rem; */ 34 /* animation: slide-in 0.4s 1s both; */ 35 text-shadow: 0px 0px 16px #CECECE; 36} 37 38.content { 39 display: flex; 40 flex-direction: column; 41 align-items: center; 42 gap: 0.8rem; 43} 44 45.content .item { 46 width: 110px; 47 display: flex; 48 align-items: center; 49 justify-content: center; 50 gap: 0.5rem; 51 padding: 10px 16px; 52 background: rgba( 255, 255, 255, 0.05 ); 53 box-shadow: 0 0 2px 2px rgba(255, 255, 255, 0.37); 54 backdrop-filter: blur( 3px ); 55 -webkit-backdrop-filter: blur( 3px ); 56 border-radius: 10px; 57} 58 59.content .item:first-child { 60 align-self: flex-start; 61} 62 63.content .item:last-child { 64 align-self: flex-end; 65} 66 67.content .item.item--create:hover svg { 68 animation: create-animation 1s infinite alternate; 69} 70 71.content .item.item--post:hover svg { 72 animation: post-animation 2s infinite; 73} 74 75.content .item.item--inspire:hover svg { 76 animation: inspire-animation 2s infinite; 77} 78 79button { 80 cursor: pointer; 81 margin-top: 0.5rem; 82 font-weight: 800; 83 font-size: 0.8rem; 84 text-transform: uppercase; 85 letter-spacing: 0.1rem; 86 color: #7121a6af; 87 animation: text-color 12s ease infinite; 88 background-color: #ffffffbb; 89 border: none; 90 border-radius: 20px; 91 padding: 16px 24px; 92 transition: 0.4s; 93 box-shadow: -4px -2px 10px 0px #ffffffbb, 4px 2px 16px 0px #02735e80; 94} 95 96button:hover { 97 color: #7121a6; 98 background-color: #ffffff; 99 box-shadow: -2px -1px 8px 0px #ffffff, 2px 1px 8px 0px #02735e; 100} 101 102button:active { 103 box-shadow: none; 104} 105 106@keyframes gradient { 107 0% { 108 background-position: 0% 50%; 109 } 110 111 50% { 112 background-position: 100% 50%; 113 } 114 115 100% { 116 background-position: 0% 50%; 117 } 118} 119 120@keyframes slide-in { 121 100% { 122 top: 0rem; 123 } 124} 125 126@keyframes create-animation { 127 0% { 128 transform: scaleX(0.8); 129 } 130 131 100% { 132 transform: scaleX(1.2); 133 } 134} 135 136@keyframes post-animation { 137 0%, 100% { 138 transform: rotate(-90deg) translateY(0%); 139 } 140 141 45% { 142 transform: rotate(-90deg) translateY(-50%); 143 } 144 145 50% { 146 transform: rotate(-90deg) translateY(-50%) scaleY(-1); 147 } 148 149 55% { 150 transform: rotate(-90deg) translateY(-50%) scaleY(-1); 151 } 152 153 90% { 154 transform: rotate(-90deg) translateY(0%) scaleY(-1); 155 } 156} 157 158@keyframes inspire-animation { 159 0%,60% { 160 filter: brightness(0.8) drop-shadow(0px 0px 2px rgb(0 0 0 / 0.4)); 161 } 162 163 30%,100% { 164 filter: brightness(1) drop-shadow(0px 0px 2px rgba(255, 255, 255, 0.4)); 165 } 166} 167 168@keyframes text-color { 169 0% { 170 color: #02735E; 171 } 172 173 50% { 174 color: #7121a6; 175 } 176 177 100% { 178 color: #02735E; 179 } 180} 181
441 views
441 views
MIT License