پیشنمایش زنده
کد HTML
<div class="card">
<div class="stones-container">
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="spaceGlow">
<stop style="stop-color:#82adf8" offset="0%"></stop>
<stop style="stop-color:#4488ff" offset="20%"></stop>
<stop style="stop-color:#1144aa" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#spaceGlow)"
d="M30,20 L70,10 L90,40 L80,80 L40,90 L10,60 Z"
class="glow"
stroke="#4488ff"
></path>
</svg>
<div style="color: #4488ff" class="stone-name">Space Stone</div>
</div>
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="mindGlow">
<stop style="stop-color:#f9e89b" offset="0%"></stop>
<stop style="stop-color:#ffdd44" offset="20%"></stop>
<stop style="stop-color:#aa8800" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#mindGlow)"
d="M20,30 L60,10 L90,50 L70,90 L30,80 L10,40 Z"
class="glow"
stroke="#ffdd44"
></path>
</svg>
<div style="color: #ffdd44" class="stone-name">Mind Stone</div>
</div>
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="realityGlow">
<stop style="stop-color:#fc7070" offset="0%"></stop>
<stop style="stop-color:#ff4444" offset="20%"></stop>
<stop style="stop-color:#aa1111" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#realityGlow)"
d="M40,10 L80,30 L90,70 L60,90 L20,80 L10,40 Z"
class="glow"
stroke="#ff4444"
></path>
</svg>
<div style="color: #ff4444" class="stone-name">Reality Stone</div>
</div>
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="powerGlow">
<stop style="stop-color:#bd76f7" offset="0%"></stop>
<stop style="stop-color:#aa44ff" offset="20%"></stop>
<stop style="stop-color:#6611aa" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#powerGlow)"
d="M30,20 L70,10 L90,50 L70,90 L30,80 L10,30 Z"
class="glow"
stroke="#aa44ff"
></path>
</svg>
<div style="color: #aa44ff" class="stone-name">Power Stone</div>
</div>
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="timeGlow">
<stop style="stop-color:#9df89d" offset="0%"></stop>
<stop style="stop-color:#44ff44" offset="20%"></stop>
<stop style="stop-color:#11aa11" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#timeGlow)"
d="M20,20 L60,10 L90,40 L80,80 L40,90 L10,50 Z"
class="glow"
stroke="#44ff44"
></path>
</svg>
<div style="color: #44ff44" class="stone-name">Time Stone</div>
</div>
<div class="stone-wrapper">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 100 100"
class="stone"
>
<defs>
<radialGradient r="50%" cy="50%" cx="50%" id="soulGlow">
<stop style="stop-color:#f5c58a" offset="0%"></stop>
<stop style="stop-color:#ffaa44" offset="20%"></stop>
<stop style="stop-color:#aa6611" offset="100%"></stop>
</radialGradient>
</defs>
<path
fill="url(#soulGlow)"
d="M30,10 L70,20 L90,50 L70,80 L30,90 L10,40 Z"
class="glow"
stroke="#ddaa44"
></path>
</svg>
<div style="color: #ffaa44" class="stone-name">Soul Stone</div>
</div>
</div>
</div>
کد CSS
.card {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: "Arial", sans-serif;
overflow: hidden;
}
.stones-container {
position: relative;
width: 100%;
display: flex;
justify-content: space-around;
align-items: center;
padding: 2rem;
}
.stone-wrapper {
position: relative;
width: 120px;
height: 120px;
}
.stone {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
transition: transform 0.3s ease;
}
.stone:hover {
transform: scale(1.2);
}
.stone-name {
position: absolute;
width: 100%;
text-align: center;
bottom: -40px;
left: 0;
margin-top: 10px;
color: #fff;
font-size: 16px;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0;
transition: opacity 0.3s ease;
text-shadow: 0 0 10px currentColor;
}
.stone:hover + .stone-name {
opacity: 1;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
.stone-wrapper {
animation: float 4s ease-in-out infinite;
}
.stone-wrapper:nth-child(2) {
animation-delay: -0.5s;
}
.stone-wrapper:nth-child(3) {
animation-delay: -1s;
}
.stone-wrapper:nth-child(4) {
animation-delay: -1.5s;
}
.stone-wrapper:nth-child(5) {
animation-delay: -2s;
}
.stone-wrapper:nth-child(6) {
animation-delay: -2.5s;
}