CSS offset-path (मोशन पाथ) के साथ सर्कुलर पथ में एलिमेंट मूव करना

परिचय

हम CSS offset-path प्रॉपर्टी का उपयोग करके किसी एलिमेंट के लिए मोशन पथ परिभाषित कर सकते हैं। यह जटिल पथ एनिमेशन के लिए एक मॉडर्न, घोषनात्मक तरीका प्रदान करता है।

सिंटैक्स

selector {
  offset-path: /* value */;
}

उदाहरण: SVG पाथ के साथ सर्कुलर मोशन

<!DOCTYPE html>
<html>
<head>
  <style>
    div {
      margin: 5%;
      width: 35px;
      height: 35px;
      offset-path: path('M70,0 A70,70 0 1,1 70,140 A70,70 0 1,1 70,0');
      animation: round 3000ms infinite ease-in-out;
      background: darkseagreen;
      border-radius: 30%;
    }
    @keyframes round {
      0% { offset-distance: 0%; }
      100% { offset-distance: 100%; }
    }
  </style>
</head>
<body>
  <hr/>
  <div></div>
</body>
</html>

ऑफसेट प्रॉपर्टीज

पाथ फंक्शन

offset-path: path('M x y L x y C x y x y x y Z');

• M = मूव टू
• L = लाइन टू
• C = क्यूबिक बेजियर कर्व
• Q = क्वाड्रेटिक बेजियर
• A = आर्क (rx, ry, x-axis-rotation, large-arc, sweep, x, y)
• Z = क्लोज पाथ

व्यावहारिक उदाहरण: जटिल पाथ एनिमेशन

<!DOCTYPE html>
<html>
<head>
  <style>
    .path-demo {
      width: 600px;
      height: 400px;
      margin: 2rem auto;
      position: relative;
      border: 2px dashed #cbd5e1;
      border-radius: 12px;
    }
    .path-demo::before {
      content: '';
      position: absolute;
      top: 50px; left: 50px; right: 50px; bottom: 50px;
      border: 1px solid #94a3b8;
      border-radius: 8px;
      pointer-events: none;
    }
    .moving-box {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #3b82f6, #8b5cf6);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      font-size: 0.875rem;
      offset-path: path('M 50,200 Q 300,50 550,200 Q 300,350 50,200');
      offset-rotate: auto 90deg; /* पथ का अनुसरण करें, 90° ऑफसेट */
      animation: traverse 6s ease-in-out infinite alternate;
    }
    @keyframes traverse {
      0% { offset-distance: 0%; }
      100% { offset-distance: 100%; }
    }
  </style>
</head>
<body>
  <div class="path-demo">
    <div class="moving-box">MOVING</div>
  </div>
</body>
</html>

ऑफसेट-पाथ बनाम ट्रांसफॉर्म दृष्टिकोण