طراح سایت و توسعه‌دهنده فرانت‌اند

<!-- لودر سه‌بعدی -->
<div class="loader">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

<style>
.loader {
  width: 200px;
  height: 200px;
  perspective: 200px;
}
.dot {
  position: absolute;
  top: 50%; left: 50%;
  width: 120px; height: 120px;
  margin-top: -60px; margin-left: -60px;
  border-radius: 100px;
  border: 40px outset #1e3f57;
  transform-origin: 50% 50%;
  transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px);
  animation: dot1 1000ms cubic-bezier(.49,.06,.43,.85) infinite;
}
.dot:nth-child(2) {
  width: 140px; height: 140px;
  border-width: 30px;
  border-color: #447891;
  animation-name: dot2;
  animation-delay: 75ms;
}
.dot:nth-child(3) {
  width: 160px; height: 160px;
  border-width: 20px;
  border-color: #6bb2cd;
  animation-name: dot3;
  animation-delay: 150ms;
}
@keyframes dot1 {
  0% { border-color: #1e3f57; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
  50% { border-color: #1e574f; transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); }
  100% { border-color: #1e3f57; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
}
@keyframes dot2 {
  0% { border-color: #447891; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
  50% { border-color: #449180; transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); }
  100% { border-color: #447891; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
}
@keyframes dot3 {
  0% { border-color: #6bb2cd; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
  50% { border-color: #6bcdb2; transform: rotateX(20deg) rotateY(20deg) rotateZ(50deg) translateZ(0px); }
  100% { border-color: #6bb2cd; transform: rotateX(24deg) rotateY(20deg) rotateZ(0deg) translateZ(-25px); }
}
</style>

<!-- گیربکس چرخان -->
<div class="gearbox">
  <div class="overlay"></div>
  <div class="gear one">
    <div class="gear-inner">
      <div class="bar"></div>
      <div class="bar"></div>
      <div class="bar"></div>
    </div>
  </div>
  <!-- تکرار برای gear two, three, four.large -->
</div>

<style>
@keyframes clockwise { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes counter-clockwise { 0%{transform:rotate(0deg)} 100%{transform:rotate(-360deg)} }

.gearbox {
  background: #111;
  height: 150px; width: 200px;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
.gear {
  position: absolute;
  height: 60px; width: 60px;
  border-radius: 30px;
}
.gear.large { height: 120px; width: 120px; border-radius: 60px; }

.gear.one { top:12px; left:10px; }
.gear.two { top:61px; left:60px; }
.gear.three { top:110px; left:10px; }
.gear.four { top:13px; left:128px; }

.gear.one .gear-inner { animation: counter-clockwise 3s infinite linear; }
.gear.two .gear-inner { animation: clockwise 3s infinite linear; }
.gear.three .gear-inner { animation: counter-clockwise 3s infinite linear; }
.gear.four .gear-inner { animation: counter-clockwise 6s infinite linear; }
/* ... سایر استایل‌ها در فایل اصلی ... */
</style>

<!-- فریم SVG سه‌بعدی تعاملی -->
<div class="svg-frame">
  <svg style="--i:0;--j:0;">
    <g id="out1">
      <path d="M72 172C72 116.772...Z"></path>
      <path stroke="#00FFFF" stroke-width="2" d="..."></path>
    </g>
  </svg>
  <!-- لایه‌های out2, inner3, out3, inner1 و center -->
  <svg style="--i:2;--j:4;">
    <path id="center1" fill="#00FFFF" d="..."></path>
    <path id="center" fill="#00FFFF" d="..."></path>
  </svg>
</div>

<style>
.svg-frame {
  position: relative;
  width: 300px; height: 300px;
  transform-style: preserve-3d;
  display: flex;
  justify-content: center;
  align-items: center;
}
.svg-frame svg {
  position: absolute;
  transition: .5s;
  z-index: calc(1 - (0.2 * var(--j)));
  width: 344px; height: 344px;
  fill: none;
}
.svg-frame:hover svg {
  transform: rotate(-80deg) skew(30deg)
    translateX(calc(45px * var(--i)))
    translateY(calc(-35px * var(--i)));
}
#out2 { animation: rotate16 7s ease-in-out infinite alternate; }
#out3 { animation: rotate16 3s ease-in-out infinite alternate; stroke: #ff0; }
#center1 { fill: #ff0; animation: rotate16 2s ease-in-out infinite alternate; }
@keyframes rotate16 { to { transform: rotate(360deg); } }
</style>

<!-- دکمه انیمیشنی با افکت shake -->
<button class="button">
  <span>Not allowed!</span>
  <span>
    <svg viewBox="0 0 24 24">
      <path d="m12.002 2.005c5.518..."/>
    </svg>
  </span>
</button>

<style>
.button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 15px 20px;
  background-color: #212121;
  border: none;
  color: #e8e8e8;
  font-size: 20px;
  font-weight: 600;
  border-radius: 50px;
  cursor: not-allowed;
  overflow: hidden;
  transition: all 0.3s ease cubic-bezier(0.23, 1, 0.320, 1);
}
.button span { position: relative; z-index: 2; }
.button::before {
  position: absolute;
  content: '';
  width: 100%; height: 100%;
  translate: 0 105%;
  background-color: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.button svg {
  width: 32px; height: 32px;
  fill: #F53844;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.320, 1);
}
.button:hover { animation: shake 0.2s linear 1; }
.button:hover::before { translate: 0 0; }
.button:hover svg { fill: #e8e8e8; }

@keyframes shake {
  0% { rotate: 0deg; }
  33% { rotate: 10deg; }
  66% { rotate: -10deg; }
  100% { rotate: 10deg; }
}
</style>