پیشنمایش زنده
کد HTML
<div class="card">
<div class="music-bar">
<div class="music"></div>
<div class="music-control">
<svg
stroke="#ffffff"
fill="#cccccc"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 28 28"
height="24px"
width="24px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<title>play</title>
<desc>Created with Sketch Beta.</desc>
<defs></defs>
<g
fill-rule="evenodd"
fill="none"
stroke-width="1"
stroke="none"
id="Page-1"
>
<g
fill="#ffffff"
transform="translate(-419.000000, -571.000000)"
id="Icon-Set-Filled"
>
<path
id="play"
d="M440.415,583.554 L421.418,571.311 C420.291,570.704 419,570.767 419,572.946 L419,597.054 C419,599.046 420.385,599.36 421.418,598.689 L440.415,586.446 C441.197,585.647 441.197,584.353 440.415,583.554"
></path>
</g>
</g>
</g>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 32 32"
height="36px"
width="36px"
fill="#ffffff"
>
<title>forward</title>
<path
d="M0 24q0 0.544 0.288 1.056t0.768 0.736q0.48 0.256 1.056 0.224t0.992-0.32l12-8q0.896-0.608 0.896-1.696t-0.896-1.632l-12-8q-0.448-0.32-0.992-0.352t-1.056 0.224q-0.48 0.256-0.768 0.736t-0.288 1.024v16zM16 24q0 0.544 0.288 1.056t0.768 0.736q0.48 0.256 1.056 0.224t0.992-0.32l12-8q0.896-0.608 0.896-1.696t-0.896-1.632l-12-8q-0.448-0.32-0.992-0.352t-1.056 0.224q-0.48 0.256-0.768 0.736t-0.288 1.024v16z"
></path>
</svg>
</div>
</div>
<div class="bottom-bar">
<div class="nav-bar">
<div class="nav-icons home">
<svg
fill="#ffffff"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 20 20"
height="36px"
width="36px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<title></title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g
fill-rule="evenodd"
fill="none"
stroke-width="1"
stroke="none"
id="Page-1"
>
<g
fill="#fff"
transform="translate(-341.000000, -720.000000)"
id="Dribbble-Light-Preview"
>
<g transform="translate(56.000000, 160.000000)" id="icons">
<path
id="home-[#ccccccccccc]"
d="M299.875,576.21213 C299.875,576.76413 299.399,577.00013 298.8125,577.00013 L297.75,577.00013 C297.1635,577.00013 296.6875,576.76413 296.6875,576.21213 L296.6875,575.21213 C296.6875,574.10713 295.736562,573.00013 294.5625,573.00013 L292.4375,573.00013 C291.263438,573.00013 290.3125,574.10713 290.3125,575.21213 L290.3125,576.21213 C290.3125,576.76413 289.8365,577.00013 289.25,577.00013 L288.1875,577.00013 C287.601,577.00013 287.125,576.76413 287.125,576.21213 L287.125,568.14913 C287.125,568.01613 287.181312,567.88913 287.280125,567.79513 L292.738188,562.65913 C293.153625,562.26813 293.826188,562.26813 294.240563,562.65913 L299.719875,567.81513 C299.818688,567.90913 299.875,568.03613 299.875,568.16813 L299.875,576.21213 Z M302,567.62513 C302,567.36013 301.888438,567.10713 301.690812,566.91913 L294.998125,560.58913 C294.169375,559.80613 292.823188,559.80313 291.99125,560.58313 L285.312375,566.84813 C285.112625,567.03613 285,567.29013 285,567.55613 L285,577.21213 C285,578.31713 285.950938,579.00013 287.125,579.00013 L290.3125,579.00013 C291.486562,579.00013 292.4375,578.31713 292.4375,577.21213 L292.4375,576.21213 C292.4375,575.66013 292.9135,575.21213 293.5,575.21213 C294.0865,575.21213 294.5625,575.66013 294.5625,576.21213 L294.5625,577.21213 C294.5625,578.31713 295.513438,579.00013 296.6875,579.00013 L299.875,579.00013 C301.049062,579.00013 302,578.31713 302,577.21213 L302,567.62513 Z"
></path>
</g>
</g>
</g>
</g>
</svg>
</div>
<div class="nav-icons new">
<svg
stroke="#333333"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="36px"
width="36px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
stroke-miterlimit="10"
stroke-width="1.5"
stroke="#fff"
fill-opacity=".16"
fill="#fff"
d="M18.6 3H5.4A2.4 2.4 0 0 0 3 5.4v13.2A2.4 2.4 0 0 0 5.4 21h13.2a2.4 2.4 0 0 0 2.4-2.4V5.4A2.4 2.4 0 0 0 18.6 3Z"
></path>
<path
stroke-linecap="round"
stroke-miterlimit="10"
stroke-width="1.5"
stroke="#fff"
d="M3 12h18M12 21V3"
></path>
</g>
</svg>
</div>
<div class="nav-icons radio">
<svg
fill="none"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
height="36px"
width="36px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<g fill="#ffffff">
<path
d="M3.41 2.476a.75.75 0 01-.013 1.06A6.235 6.235 0 001.5 8c0 1.67.68 3.276 1.897 4.463a.75.75 0 01-1.048 1.074A7.735 7.735 0 010 8c0-2.08.847-4.072 2.35-5.537a.75.75 0 011.06.013zM12.59 2.476a.75.75 0 011.06-.013A7.735 7.735 0 0116 8c0 2.08-.847 4.072-2.35 5.537a.75.75 0 01-1.047-1.074A6.234 6.234 0 0014.5 8c0-1.67-.68-3.276-1.897-4.463a.75.75 0 01-.013-1.06zM7 8a1 1 0 011-1h.01a1 1 0 010 2H8a1 1 0 01-1-1z"
></path>
<path
d="M5.864 6.046a.75.75 0 10-1.028-1.092c-.42.395-.756.867-.987 1.39a4.1 4.1 0 000 3.307c.23.523.567.994.987 1.39a.75.75 0 001.028-1.093 2.774 2.774 0 01-.642-.902 2.6 2.6 0 010-2.098c.147-.334.365-.641.642-.902zM11.164 4.96a.75.75 0 10-1.028 1.092c.277.26.495.567.642.902a2.601 2.601 0 010 2.098 2.775 2.775 0 01-.642.902.75.75 0 101.028 1.092c.42-.395.756-.866.986-1.39a4.1 4.1 0 000-3.307 4.273 4.273 0 00-.986-1.39z"
></path>
</g>
</g>
</svg>
</div>
<div class="nav-icons library">
<svg
stroke-width="0.00024000000000000003"
stroke="#000000"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24.00 24.00"
height="36px"
width="36px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
fill="#fff"
d="M17 4.75H16V3.26C16 2.43 15.32 1.75 14.49 1.75H9.51C8.68 1.75 8 2.43 8 3.26V4.75H7C5.9 4.75 5 5.65 5 6.75V6.88C5.32 6.79 5.65 6.75 6 6.75H18C18.35 6.75 18.68 6.79 19 6.88V6.75C19 5.65 18.1 4.75 17 4.75Z"
></path>
<path
fill="#cccccc"
d="M13.9294 16.9297C13.6094 16.9297 13.3594 17.1897 13.3594 17.4997C13.3594 17.8097 13.6194 18.0697 13.9294 18.0697C14.2394 18.0697 14.4994 17.8097 14.4994 17.4997C14.4994 17.1897 14.2394 16.9297 13.9294 16.9297Z"
></path>
<path
fill="#fff"
d="M9.07 17.8086C8.75 17.8086 8.5 18.0686 8.5 18.3786C8.5 18.6886 8.76 18.9486 9.07 18.9486C9.38 18.9486 9.64 18.6886 9.64 18.3786C9.64 18.0686 9.39 17.8086 9.07 17.8086Z"
></path>
<path
fill="#fff"
d="M19 8.38C18.68 8.29 18.35 8.25 18 8.25H6C5.65 8.25 5.32 8.29 5 8.38C3.28 8.83 2 10.4 2 12.25V18.25C2 20.45 3.8 22.25 6 22.25H18C20.2 22.25 22 20.45 22 18.25V12.25C22 10.4 20.72 8.83 19 8.38ZM16 13.28V17.5C16 18.64 15.07 19.57 13.93 19.57C12.79 19.57 11.86 18.64 11.86 17.5C11.86 16.36 12.79 15.43 13.93 15.43C14.13 15.43 14.32 15.47 14.5 15.52V14.26L11.15 15.17V18.38C11.15 18.39 11.15 18.4 11.14 18.41C11.13 19.54 10.2 20.46 9.07 20.46C7.93 20.46 7 19.53 7 18.38C7 17.23 7.93 16.31 9.07 16.31C9.27 16.31 9.46 16.35 9.65 16.4V14.6V13.05C9.65 12.19 10.19 11.49 11.01 11.27L13.66 10.54C14.51 10.31 15.05 10.53 15.35 10.76C15.65 10.99 16 11.44 16 12.33V13.28Z"
></path>
</g>
</svg>
</div>
</div>
<div class="search-bar">
<svg
stroke="#cccccc"
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
height="36px"
width="36px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<path
stroke-linejoin="round"
stroke-linecap="round"
stroke-width="2"
stroke="#fff"
d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
></path>
</g>
</svg>
</div>
</div>
</div>
<div class="shapes">
<div class="triangle">
<svg
fill="#000000"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
version="1.1"
viewBox="0 0 512 512"
height="80px"
width="80px"
>
<g stroke-width="0" id="SVGRepo_bgCarrier"></g>
<g
stroke-linejoin="round"
stroke-linecap="round"
id="SVGRepo_tracerCarrier"
></g>
<g id="SVGRepo_iconCarrier">
<title>triangle-filled</title>
<g
fill-rule="evenodd"
fill="none"
stroke-width="1"
stroke="none"
id="Page-1"
>
<g
transform="translate(32.000000, 42.666667)"
fill="#27b4be"
id="drop"
>
<path
id="Combined-Shape"
d="M246.312928,5.62892705 C252.927596,9.40873724 258.409564,14.8907053 262.189374,21.5053731 L444.667042,340.84129 C456.358134,361.300701 449.250007,387.363834 428.790595,399.054926 C422.34376,402.738832 415.04715,404.676552 407.622001,404.676552 L42.6666667,404.676552 C19.1025173,404.676552 7.10542736e-15,385.574034 7.10542736e-15,362.009885 C7.10542736e-15,354.584736 1.93772021,347.288125 5.62162594,340.84129 L188.099293,21.5053731 C199.790385,1.04596203 225.853517,-6.06216498 246.312928,5.62892705 Z"
></path>
</g>
</g>
</g>
</svg>
</div>
<div class="circle"></div>
<div class="square"></div>
</div>
کد CSS
.card {
position: relative;
width: 400px;
height: 160px;
border-radius: 20Q;
display: flex;
justify-content: center;
padding: 1rem;
}
.music-bar {
position: absolute;
width: 90%;
height: 50px;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 #0d2626;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 60Q;
border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: space-between;
}
.music {
position: absolute;
width: 40px;
height: 40px;
background: rgba(149, 0, 255, 0.25);
box-shadow: 0 8px 32px 0 #0d2626;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 15Q;
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
}
.music::after {
content: "Uiverse Anthem";
position: absolute;
left: 45px;
width: 130px;
color: #fff;
font-weight: 600;
}
.music::before {
content: "NKS";
position: absolute;
bottom: 0;
left: 45px;
width: 125px;
color: #ffffffce;
font-size: 0.8rem;
font-weight: 400;
letter-spacing: 2px;
}
.music-control {
position: absolute;
right: 0;
border-radius: 30Q;
width: 30%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-evenly;
}
.music-control svg {
cursor: pointer;
}
.music-control svg:active {
transform: scale(0.9);
}
.bottom-bar {
position: absolute;
bottom: 10px;
width: 100%;
height: 60px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.nav-bar {
position: absolute;
left: 20px;
width: 70%;
height: 60px;
padding: 6px;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 #0d2626;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 60Q;
border: 1px solid rgba(255, 255, 255, 0.18);
display: flex;
align-items: center;
justify-content: space-evenly;
}
.nav-icons {
display: flex;
align-items: center;
justify-content: center;
width: 25%;
padding: 6px;
border-radius: 60Q;
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.nav-icons:hover {
background-color: rgba(255, 255, 255, 0.15);
}
.nav-icons svg {
transition: all 0.1s ease-in-out;
}
.nav-icons:hover svg {
transform: translateY(-2px);
}
.nav-icons svg:active {
transform: scale(0.9);
}
.search-bar {
position: absolute;
right: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
box-shadow: 0 8px 32px 0 #0d2626;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.1s ease-in-out;
}
.search-bar:hover {
transform: translateY(-2px);
}
.search-bar svg {
transition: all 0.1s ease-in-out;
transition-delay: 0.1s;
}
.search-bar:hover svg {
transform: translateY(-2px);
}
.search-bar svg:active {
transform: scale(0.9);
}
.shapes {
position: absolute;
width: 600px;
height: 400px;
z-index: -1;
}
.triangle {
position: absolute;
top: 20%;
left: 10%;
width: 100px;
height: 100px;
transform: rotate(-45deg);
animation: move 12s linear infinite;
}
.circle {
position: absolute;
top: 30%;
right: 30%;
width: 80px;
height: 80px;
background-color: #c436eb;
border-radius: 50%;
animation: move 12s linear infinite;
animation-delay: 2s;
}
.square {
position: absolute;
bottom: 40%;
right: 60%;
width: 50px;
height: 50px;
background-color: #def92e;
border-radius: 12Q;
transform: rotate(45deg);
animation: move 12s alternate-reverse infinite;
animation-delay: 6s;
}
@keyframes move {
from,
to {
transform: rotate(-45deg);
}
25%,
75% {
transform: translateX(30px) translateY(10px) rotate(30deg);
}
50% {
transform: translateX(60px) translateY(20px);
}
}