پیشنمایش زنده
کد HTML
<div class="e-card playing">
<div class="image"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="wave"></div>
<div class="infotop">
<svg
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 1350.000000 1350.000000"
height="250"
width="250"
xmlns="http://www.w3.org/2000/svg"
version="1.0"
>
<g
stroke="none"
fill="#00ff80"
transform="translate(0.000000,1350.000000) scale(0.100000,-0.100000)"
>
<path
d="M6640 10520 c-114 -8 -246 -33 -326 -61 -33 -11 -76 -24 -97 -28 -21 -5 -44 -14 -50 -20 -6 -6 -17 -11 -25 -11 -18 0 -167 -75 -267 -134 -216 -129 -456 -365 -593 -586 -46 -73 -152 -299 -182 -385 -103 -300 -122 -612 -58 -933 11 -56 18 -109 14 -117 -5 -13 -48 -15 -304 -15 -218 0 -301 -3 -310 -12 -8 -8 -12 -58 -12 -160 0 -135 2 -148 19 -158 13 -6 152 -10 384 -10 l364 0 25 -37 c49 -74 61 -105 46 -114 -7 -5 -249 -9 -538 -9 -396 0 -529 -3 -538 -12 -17 -17 -17 -289 0 -306 9 -9 177 -12 694 -12 l682 0 81 -67 c62 -52 78 -70 69 -80 -8 -10 -109 -13 -513 -13 -442 0 -504 -2 -515 -15 -17 -20 -18 -291 -2 -307 12 -12 4241 -16 4260 -4 17 11 17 300 -1 314 -8 7 -378 12 -1142 15 -1202 4 -1205 4 -1390 53 -292 78 -591 285 -784 544 -72 96 -211 360 -211 399 0 6 -4 19 -9 29 -5 9 -17 47 -25 83 -86 370 -50 690 117 1039 67 139 246 365 359 452 18 14 42 34 53 45 35 33 162 112 252 157 103 52 208 90 307 111 39 8 87 19 106 25 19 5 74 10 122 10 120 0 118 -3 118 175 0 132 -2 145 -19 155 -11 5 -30 9 -43 8 -13 -1 -66 -5 -118 -8z"
></path>
<path
d="M6630 10023 c-175 -29 -322 -78 -450 -151 -36 -20 -72 -40 -80 -44 -39 -17 -184 -143 -246 -215 -101 -114 -145 -176 -201 -283 -56 -105 -101 -238 -129 -375 -23 -113 -23 -394 0 -483 8 -31 22 -88 32 -127 43 -176 169 -388 327 -552 191 -198 423 -320 707 -373 101 -19 158 -20 1471 -20 1152 0 1368 2 1378 14 8 9 11 61 9 162 l-3 149 -1380 6 c-1064 4 -1391 8 -1430 18 -243 61 -390 142 -525 290 -90 99 -117 137 -165 231 -31 61 -45 98 -86 230 -10 32 -14 97 -14 220 1 167 2 180 32 276 54 175 136 309 273 442 81 80 122 108 230 160 263 127 518 136 817 28 69 -25 150 -73 230 -136 42 -33 83 -60 92 -60 9 0 60 44 114 98 119 120 121 127 37 197 -83 68 -190 138 -277 180 -81 40 -275 105 -313 105 -14 0 -63 7 -110 15 -96 17 -228 16 -340 -2z"
></path>
<path
d="M6660 9531 c-175 -33 -308 -107 -435 -244 -81 -86 -123 -151 -168 -256 -35 -82 -46 -126 -56 -237 -21 -219 43 -433 176 -592 103 -122 160 -168 283 -225 190 -89 142 -86 1521 -87 1008 0 1188 2 1205 14 17 13 19 28 20 151 0 94 -3 141 -12 153 -12 16 -95 17 -1256 22 l-1243 5 -80 38 c-87 42 -124 73 -189 157 -54 70 -74 122 -87 222 -33 264 150 512 406 547 126 18 213 0 325 -65 111 -65 198 -189 226 -325 8 -40 17 -76 20 -81 3 -4 75 -8 160 -8 118 0 156 3 160 13 2 7 0 53 -5 102 -37 320 -272 577 -621 678 -64 19 -284 30 -350 18z"
></path>
<path
d="M4444 6737 c-19 -11 -21 -296 -2 -315 15 -15 4724 -17 4748 -2 12 8 15 35 13 156 -1 81 -6 151 -10 155 -10 10 -4730 16 -4749 6z"
></path>
<path
d="M6642 6252 l-1703 -2 -9 -26 c-15 -38 -13 -277 2 -292 17 -17 3749 -17 3766 0 17 17 17 292 -1 306 -19 16 -201 17 -2055 14z"
></path>
<path
d="M4760 5275 c-203 -35 -368 -140 -478 -304 -116 -174 -141 -429 -60 -621 60 -143 133 -232 256 -313 132 -88 234 -117 411 -117 106 0 138 4 210 26 106 32 201 87 281 160 71 66 76 91 28 126 -18 12 -57 44 -86 70 -66 60 -89 61 -150 7 -26 -23 -72 -53 -102 -68 -49 -23 -67 -26 -170 -26 -104 0 -120 3 -172 27 -71 33 -146 102 -180 165 -38 71 -54 175 -39 263 14 89 39 139 102 205 152 161 428 161 579 0 43 -45 62 -37 211 94 22 18 39 41 39 50 0 8 -31 45 -68 81 -102 98 -213 151 -367 175 -107 17 -145 17 -245 0z"
></path>
<path
d="M6100 5279 c-134 -15 -281 -78 -378 -161 -236 -202 -303 -527 -168 -819 64 -136 219 -278 366 -331 176 -65 417 -66 576 -3 176 71 319 209 387 375 31 74 57 192 57 253 0 120 -54 297 -121 392 -35 52 -131 144 -191 184 -77 51 -193 93 -303 107 -111 15 -118 15 -225 3z m245 -306 c185 -60 293 -254 252 -455 -18 -90 -58 -159 -124 -215 -67 -56 -119 -80 -197 -91 -183 -24 -346 59 -424 217 -25 51 -27 66 -27 171 0 104 3 120 27 173 29 61 107 146 161 174 100 52 222 61 332 26z"
></path>
<path
d="M9217 5261 l-147 -6 -33 -36 c-17 -20 -106 -121 -197 -225 -194 -221 -206 -234 -220 -234 -12 0 -11 -20 -10 236 1 116 -2 223 -6 238 l-6 26 -148 0 c-82 0 -151 -4 -154 -9 -4 -5 -7 -295 -9 -644 -2 -525 0 -637 12 -650 11 -14 35 -17 150 -17 93 0 141 4 149 12 9 9 12 70 12 214 l0 201 31 39 c38 49 56 59 74 44 14 -12 294 -378 332 -435 49 -73 59 -76 231 -73 128 3 157 6 165 19 10 16 -2 34 -218 319 -49 66 -117 156 -150 200 -33 44 -75 100 -92 123 -18 23 -33 51 -33 61 0 10 19 40 43 65 23 25 67 75 97 110 30 36 96 110 145 165 201 226 208 238 159 256 -14 6 -26 9 -27 8 -1 -1 -68 -4 -150 -7z"
></path>
<path
d="M7053 5248 c-4 -7 -8 -298 -9 -646 -1 -534 1 -636 13 -648 19 -19 283 -20 301 -2 9 9 12 77 12 245 l0 233 89 0 89 0 40 -72 c22 -40 56 -104 77 -143 21 -38 58 -108 83 -155 69 -129 52 -120 222 -120 118 0 150 3 160 15 14 17 -11 68 -164 344 -50 90 -84 162 -81 172 3 9 27 28 53 42 66 36 126 102 156 171 22 50 26 73 26 155 0 160 -45 255 -158 334 -55 37 -92 52 -185 72 -92 20 -711 22 -724 3z m635 -264 c58 -24 90 -61 103 -119 16 -71 -2 -127 -54 -169 -37 -30 -41 -30 -180 -36 -78 -4 -152 -3 -164 2 -23 7 -23 11 -23 167 0 118 3 161 13 164 6 3 70 6 140 6 94 1 137 -3 165 -15z"
></path>
<path
d="M5401 3598 c-97 -22 -146 -89 -139 -192 6 -94 64 -155 158 -164 71 -7 116 5 156 40 48 42 64 77 64 140 0 71 -24 116 -80 150 -54 32 -100 40 -159 26z m95 -89 c42 -25 54 -47 54 -94 0 -53 -44 -95 -100 -95 -88 0 -133 100 -75 169 22 26 37 33 79 40 5 0 24 -8 42 -20z"
></path>
<path
d="M6955 3598 c-86 -31 -130 -97 -123 -190 9 -125 124 -195 258 -158 79 22 142 128 126 214 -10 52 -77 117 -139 134 -56 14 -81 14 -122 0z m110 -84 c40 -19 70 -74 60 -111 -3 -14 -19 -38 -35 -54 -61 -62 -170 -20 -170 66 0 47 14 71 53 95 39 24 50 24 92 4z"
></path>
<path
d="M8518 3597 c-50 -23 -68 -47 -68 -92 0 -56 29 -86 109 -115 52 -19 61 -27 59 -44 -4 -28 -59 -33 -111 -10 -38 18 -40 18 -53 -1 -41 -56 50 -107 162 -90 88 13 133 96 85 156 -10 14 -43 35 -73 48 -81 35 -83 37 -83 57 0 19 19 21 109 12 19 -2 32 3 40 15 16 24 -1 46 -49 63 -48 16 -90 17 -127 1z"
></path>
<path
d="M4923 3589 c-9 -9 -13 -57 -13 -166 0 -150 0 -153 24 -168 19 -12 42 -15 103 -11 89 5 109 11 141 39 29 27 30 84 1 121 -18 23 -20 31 -10 52 19 43 14 88 -14 114 -23 22 -37 25 -123 28 -70 3 -100 0 -109 -9z m167 -74 c7 -8 10 -22 6 -30 -7 -19 -51 -36 -71 -29 -17 7 -30 47 -20 63 9 16 71 13 85 -4z m-7 -126 c30 -16 37 -30 26 -51 -7 -13 -22 -18 -55 -18 -51 0 -64 16 -46 56 13 26 40 31 75 13z"
></path>
<path
d="M5733 3593 c-10 -3 -13 -47 -13 -168 0 -189 -2 -185 94 -185 79 0 152 18 186 46 40 34 64 102 56 160 -15 110 -79 154 -222 153 -49 0 -95 -3 -101 -6z m210 -103 c26 -29 29 -38 24 -79 -7 -63 -40 -91 -108 -91 l-49 0 0 98 c0 54 3 102 8 106 4 4 27 6 52 3 34 -4 51 -13 73 -37z"
></path>
<path
d="M6094 3589 c-7 -11 7 -45 37 -89 55 -82 79 -140 79 -189 0 -45 3 -53 25 -63 40 -18 65 12 65 76 0 51 2 55 84 199 31 54 28 77 -7 77 -32 0 -53 -18 -80 -70 -32 -61 -56 -63 -86 -8 -13 24 -31 51 -39 61 -17 19 -67 23 -78 6z"
></path>
<path
d="M6502 3591 c-10 -6 -13 -46 -13 -166 0 -87 4 -162 9 -167 15 -15 78 -21 147 -13 87 9 125 39 125 98 0 27 -7 48 -20 63 -20 21 -20 23 -4 57 24 51 10 96 -36 119 -37 19 -183 25 -208 9z m156 -73 c22 -22 13 -46 -20 -57 -26 -9 -35 -8 -50 5 -32 30 -15 64 32 64 14 0 31 -5 38 -12z m20 -142 c30 -30 -26 -72 -78 -59 -27 7 -33 32 -14 60 13 21 21 24 47 19 18 -4 38 -13 45 -20z"
></path>
<path
d="M7392 3577 c-12 -13 -22 -26 -22 -29 0 -7 -94 -209 -115 -248 -16 -31 -4 -60 26 -60 11 0 35 14 52 32 26 26 42 33 84 36 49 4 55 2 93 -32 44 -39 61 -44 84 -21 17 17 16 20 -64 185 -81 170 -95 183 -138 137z m48 -141 c18 -23 8 -61 -16 -64 -26 -4 -37 19 -24 53 11 28 22 31 40 11z"
></path>
<path
d="M7682 3588 c-8 -8 -12 -60 -12 -170 0 -157 0 -159 24 -169 17 -8 29 -8 45 0 17 10 21 21 21 65 0 84 37 83 80 -2 34 -66 73 -87 104 -56 15 14 14 19 -9 58 -31 54 -31 71 0 108 50 60 23 147 -53 168 -52 14 -185 13 -200 -2z m166 -74 c12 -8 22 -21 22 -28 0 -25 -37 -48 -72 -44 -28 3 -33 7 -36 33 -6 49 41 71 86 39z"
></path>
<path
d="M8053 3593 c-10 -3 -13 -47 -13 -168 0 -197 -5 -190 131 -183 146 9 209 64 209 182 0 123 -70 177 -227 175 -48 0 -94 -3 -100 -6z m210 -103 c37 -41 37 -96 1 -140 -24 -28 -31 -31 -78 -28 l-51 3 -3 94 c-3 107 1 114 63 107 28 -3 48 -14 68 -36z"
></path>
</g>
</svg>
</div>
</div>
کد CSS
.e-card {
margin: 100px auto;
background: transparent;
box-shadow: 0px 8px 28px -9px rgba(0, 0, 0, 0.45);
position: relative;
width: 240px;
height: 330px;
border-radius: 16px;
overflow: hidden;
}
.wave {
position: absolute;
width: 540px;
height: 700px;
opacity: 0.6;
left: 0;
top: 0;
margin-left: -50%;
margin-top: -70%;
background: linear-gradient(744deg, #00ff80, #009933 60%, #00cc44);
}
.icon {
width: 3em;
margin-top: -1em;
padding-bottom: 1em;
}
.infotop {
text-align: center;
font-size: 20px;
position: absolute;
top: 4em;
left: 0;
right: 0;
color: rgb(255, 255, 255);
font-weight: 600;
}
.name {
font-size: 14px;
font-weight: 100;
position: relative;
top: 1em;
text-transform: lowercase;
}
.wave:nth-child(2),
.wave:nth-child(3) {
top: 210px;
}
.playing .wave {
border-radius: 40%;
animation: wave 3000ms infinite linear;
}
.wave {
border-radius: 40%;
animation: wave 55s infinite linear;
}
.playing .wave:nth-child(2) {
animation-duration: 4000ms;
}
.wave:nth-child(2) {
animation-duration: 50s;
}
.playing .wave:nth-child(3) {
animation-duration: 5000ms;
}
.wave:nth-child(3) {
animation-duration: 45s;
}
@keyframes wave {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}