Card by ShrinilDhorda
This card was created for Open-Source CSS Odyssey
#212121
1.card { 2 padding: 4.4rem 1.4rem; 3 display: flex; 4 gap: 1.5rem; 5 flex-direction: column; 6 position: relative; 7 overflow: hidden; 8 border-radius: 1rem; 9} 10 11.card::before { 12 content: ''; 13 width: 5rem; 14 height: 5rem; 15 border-radius: 100%; 16 position: absolute; 17 top: 0%; 18 left: 0%; 19 background-color: rgb(163, 159, 198); 20 filter: blur(50px) saturate(5); 21 animation: top 8s infinite ease-in-out; 22} 23 24.card::after { 25 content: ''; 26 width: 5rem; 27 height: 5rem; 28 border-radius: 100%; 29 position: absolute; 30 bottom: 0%; 31 left: 85%; 32 background-color: rgba(163, 159, 198); 33 filter: blur(50px) saturate(5); 34 animation: bottom 8s infinite ease-in-out; 35} 36 37.card .heading { 38 display: flex; 39 flex-direction: column; 40 font-size: 1.3rem; 41 justify-content: center; 42 align-items: center; 43 user-select: none; 44} 45 46.card .heading span { 47 font-size: 3rem; 48 text-transform: uppercase; 49 letter-spacing: 0.4rem; 50 text-shadow: 0 0 19px rgba(255, 255, 255, 0.695), 0 0 20px rgba(255, 255, 255, 0.568), 0 0 30px #1a0e34, 0 0 40px #721faad9, 0 0 50px #2c26729f, 0 0 60px #180e5c5c, 0 0 70px #101d3548; 51 border-radius: 70%; 52 padding: 0.5rem; 53 position: relative; 54} 55 56.card .content { 57 display: flex; 58} 59 60.card .content .item { 61 padding: 0.7rem; 62 cursor: pointer; 63 display: flex; 64 align-items: center; 65 gap: 5px; 66 opacity: 70%; 67 transition: 0.5s ease; 68 margin: 0 0.5rem; 69 position: relative; 70 border-radius: 2rem; 71} 72 73.item::before { 74 content: ''; 75 width: 1.5rem; 76 height: 1.5rem; 77 border-radius: 100%; 78 background-color: rgba(255, 255, 255, 0.466); 79 position: absolute; 80 filter: blur(20px); 81 top: 0%; 82} 83 84button { 85 background-color: transparent; 86 font-size: 1.3rem; 87 padding: 1rem; 88 color: rgba(255, 255, 255, 0.948); 89 transition: 0.5s ease-in-out; 90 cursor: pointer; 91 position: relative; 92 border: none; 93 border-radius: 2rem; 94 box-shadow: 0px 10px 70px 33px rgba(0,0,0,0.1); 95 background: linear-gradient(90deg, rgba(221, 218, 222, 0.185) 20%, rgba(16, 9, 9, 0.311) 100%); 96 background-size: 400% 400%; 97 animation: gradient 13s ease infinite; 98} 99 100button::before { 101 content: ''; 102 width: 10rem; 103 height: 2.5rem; 104 border-radius: 100%; 105 background-color: rgb(163, 159, 198,0.3); 106 position: absolute; 107 filter: blur(25px); 108 top: 10%; 109} 110 111button:hover { 112 scale: 102%; 113} 114 115@keyframes gradient { 116 0% { 117 background-position: 0% 50%; 118 transform: rotateY(10deg); 119 } 120 121 50% { 122 background-position: 100% 50%; 123 transform: rotateY(13deg); 124 } 125 126 100% { 127 background-position: 0% 50%; 128 transform: rotateY(10deg); 129 } 130} 131 132@keyframes top { 133 0% { 134 top: 0%; 135 transform: rotate(0deg); 136 } 137 138 50% { 139 top: 10%; 140 transform: rotate(180deg); 141 } 142 143 100% { 144 top: 0%; 145 transform: rotate(0deg); 146 } 147} 148 149@keyframes bottom { 150 0% { 151 bottom: 0%; 152 transform: rotate(0deg); 153 } 154 155 50% { 156 bottom: 10%; 157 transform: rotate(180deg); 158 } 159 160 100% { 161 bottom: 0%; 162 transform: rotate(0deg); 163 } 164} 165 166.card .content .item:hover { 167 opacity: 100%; 168 transform: translateY(-5px); 169}
552 views
552 views
MIT License