Card by Tsiangana
#e8e8e8
1.card { 2 width: 190px; 3 height: 254px; 4 background: lightgrey; 5 border-radius: 10px; 6} 7 8.card .one { 9 width: 190px; 10 height: 254px; 11 z-index: 10; 12 position: absolute; 13 background: rgba(255, 255, 255, 0.55); 14 box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); 15 backdrop-filter: blur(8.5px); 16 -webkit-backdrop-filter: blur(8.5px); 17 border-radius: 10px; 18 border: 1px solid rgba(255, 255, 255, 0.18); 19} 20 21.card .one .title { 22 width: 70px; 23 border: 1px solid rgba(180, 177, 177, 0.308); 24 display: block; 25 margin: 12px auto; 26 text-align: center; 27 font-size: 10px; 28 border-radius: 12px; 29 font-family: Roboto, sans-serif; 30 color: rgba(102, 100, 100, 0.911); 31} 32 33.card .one .music { 34 width: 80px; 35 height: 80px; 36 background: rgba(216, 212, 212, 0.726); 37 margin: 30px auto; 38 border-radius: 15px; 39 display: flex; 40 align-items: center; 41 justify-content: center; 42} 43 44.card .one .name { 45 width: 150px; 46 height: 20px; 47 font-size: 12px; 48 font-weight: 500; 49 font-family: Roboto, sans-serif; 50 padding: 0 5px; 51 margin: -22px auto; 52 display: block; 53 overflow: hidden; 54 text-align: center; 55 color: rgba(50, 49, 51, 0.637); 56} 57.card .one .name1 { 58 width: 120px; 59 height: 20px; 60 font-size: 9px; 61 font-weight: 500; 62 font-family: Roboto, sans-serif; 63 padding: 0 5px; 64 margin: 19px auto; 65 display: block; 66 overflow: hidden; 67 text-align: center; 68 color: rgba(50, 49, 51, 0.637); 69} 70.card .one .bar { 71 width: 100px; 72 margin: -15px auto; 73 display: flex; 74 align-items: center; 75 justify-content: space-between; 76 padding: 0 5px; 77 cursor: pointer; 78} 79 80.card .one .bar:last-child { 81 margin: 35px auto; 82 width: 100%; 83 padding: 2px 23px; 84} 85.card .one .bar .color { 86 fill: rgba(82, 79, 79, 0.829); 87} 88.card .one .bar .color1 { 89 fill: rgba(29, 28, 28, 0.829); 90 cursor: pointer; 91} 92 93.card .one .bar .bi:first-child { 94 transform: rotate(180deg); 95} 96.card .one .bar:last-child .color1:first-child { 97 transform: rotate(0deg); 98} 99 100.card .two { 101 width: 60px; 102 height: 60px; 103 background-color: rgb(131, 25, 163); 104 filter: drop-shadow(0 0 10px rgb(131, 25, 163)); 105 border-radius: 50%; 106 position: relative; 107 top: 30px; 108 left: 20px; 109 animation: one 5s infinite; 110} 111 112.card .three { 113 width: 60px; 114 height: 60px; 115 background-color: rgb(29, 209, 149); 116 filter: drop-shadow(0 0 10px rgb(29, 209, 149)); 117 border-radius: 50%; 118 position: relative; 119 top: 90px; 120 left: 90px; 121 animation: two 5s infinite; 122} 123 124@keyframes one { 125 0% { 126 top: 30px; 127 left: 20px; 128 } 129 20% { 130 top: 50px; 131 left: 40px; 132 } 133 40% { 134 top: 80px; 135 left: 70px; 136 } 137 50% { 138 top: 60px; 139 left: 40px; 140 } 141 60% { 142 top: 35px; 143 left: 90px; 144 } 145 80% { 146 top: 70px; 147 left: 70px; 148 } 149 100% { 150 top: 30px; 151 left: 20px; 152 } 153} 154 155@keyframes two { 156 0% { 157 top: 90px; 158 left: 90px; 159 } 160 20% { 161 top: 50px; 162 left: 40px; 163 } 164 40% { 165 top: 60px; 166 left: 20px; 167 } 168 50% { 169 top: 80px; 170 left: 30px; 171 } 172 60% { 173 top: 35px; 174 left: 90px; 175 } 176 80% { 177 top: 70px; 178 left: 60px; 179 } 180 100% { 181 top: 90px; 182 left: 90px; 183 } 184} 185
657 views
657 views
MIT License