پیشنمایش زنده
کد HTML
<div class="holographic-stack">
<div class="holographic-icon github">
<div class="holographic-ring"></div>
<div class="holographic-particles"></div>
<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path
d="M12,2.2467A10,10,0,0,0,8.83752,21.73419c.5.08752.6875-.21247.6875-.475,0-.23749-.01251-1.025-.01251-1.86249C7,19.85919,6.35,18.78423,6.15,18.22173A3.636,3.636,0,0,0,5.125,16.8092c-.35-.1875-.85-.65-.01251-.66248A2.00117,2.00117,0,0,1,6.65,17.17169a2.13742,2.13742,0,0,0,2.91248.825A2.10376,2.10376,0,0,1,10.2,16.65923c-2.225-.25-4.55-1.11254-4.55-4.9375a3.89187,3.89187,0,0,1,1.025-2.6875,3.59373,3.59373,0,0,1,.1-2.65s.83747-.26251,2.75,1.025a9.42747,9.42747,0,0,1,5,0c1.91248-1.3,2.75-1.025,2.75-1.025a3.59323,3.59323,0,0,1,.1,2.65,3.869,3.869,0,0,1,1.025,2.6875c0,3.83747-2.33752,4.6875-4.5625,4.9375a2.36814,2.36814,0,0,1,.675,1.85c0,1.33752-.01251,2.41248-.01251,2.75,0,.26251.1875.575.6875.475A10.0053,10.0053,0,0,0,12,2.2467Z"
></path>
</svg>
<div class="holographic-pulse"></div>
</div>
<div class="holographic-icon instagram">
<div class="holographic-ring"></div>
<div class="holographic-particles"></div>
<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path
d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.9 3.9 0 0 0-1.417.923A3.9 3.9 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.9 3.9 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.9 3.9 0 0 0-.923-1.417A3.9 3.9 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599s.453.546.598.92c.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.5 2.5 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.5 2.5 0 0 1-.92-.598 2.5 2.5 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233s.008-2.388.046-3.231c.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92s.546-.453.92-.598c.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92m-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217m0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334"
></path>
</svg>
<div class="holographic-pulse"></div>
</div>
</div>
کد CSS
.holographic-stack {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
perspective: 1000px;
}
.holographic-icon {
position: relative;
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
transform-style: preserve-3d;
}
.holographic-icon svg {
width: 40px;
height: 40px;
position: relative;
z-index: 3;
transition: all 0.3s ease;
filter: drop-shadow(0 0 5px currentColor);
}
.holographic-ring {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
border: 2px solid;
border-top-color: transparent;
border-bottom-color: transparent;
animation: rotate 3s linear infinite;
opacity: 0.7;
}
.holographic-particles {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(
circle,
transparent 20%,
currentColor 20%,
currentColor 30%,
transparent 30%,
transparent 40%,
currentColor 40%,
currentColor 50%,
transparent 50%
);
background-size: 15px 15px;
opacity: 0;
transition: opacity 0.3s ease;
}
.holographic-pulse {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
box-shadow: 0 0 15px currentColor;
opacity: 0;
transition:
opacity 0.3s ease,
transform 0.3s ease;
}
.holographic-icon.github {
color: #6e5494;
}
.holographic-icon.github:hover {
color: #c9510c;
transform: translateY(-10px) rotateX(20deg);
}
.holographic-icon.github:hover .holographic-ring {
border-color: #c9510c;
border-top-color: transparent;
border-bottom-color: transparent;
}
.holographic-icon.instagram {
color: #bc2a8d;
}
.holographic-icon.instagram:hover {
color: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(9, 9, 121, 1) 35%,
rgba(0, 212, 255, 1) 100%
);
transform: translateY(-10px) rotateX(20deg);
}
.holographic-icon.instagram:hover .holographic-ring {
border-color: linear-gradient(
90deg,
rgba(2, 0, 36, 1) 0%,
rgba(9, 9, 121, 1) 35%,
rgba(0, 212, 255, 1) 100%
);
border-top-color: transparent;
border-bottom-color: transparent;
}
.holographic-icon:hover {
transform: translateY(-10px) rotateX(20deg);
}
.holographic-icon:hover svg {
transform: scale(1.2) rotate(10deg);
}
.holographic-icon:hover .holographic-particles {
opacity: 0.3;
animation: particles 3s linear infinite;
}
.holographic-icon:hover .holographic-pulse {
opacity: 0.5;
animation: pulse 2s ease-out infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes particles {
from {
background-position: 0 0;
}
to {
background-position: 30px 30px;
}
}
@keyframes pulse {
0% {
transform: scale(0.8);
opacity: 0.5;
}
50% {
transform: scale(1.1);
opacity: 0.2;
}
100% {
transform: scale(1.3);
opacity: 0;
}
}
.holographic-icon::before {
content: "";
position: absolute;
bottom: -10px;
left: 5%;
width: 90%;
height: 20%;
background: rgba(0, 0, 0, 0.3);
border-radius: 50%;
filter: blur(10px);
transform: rotateX(80deg) translateZ(-20px);
opacity: 0;
transition: opacity 0.3s ease;
}
.holographic-icon:hover::before {
opacity: 0.5;
}