CSS ray() फ़ंक्शन

परिभाषा और उपयोग

CSS रेय( फ़ंक्शन एनिमेशन एलीमेंट को अनुसरने वाली ऑफ़सेट पैथ लाइन सेक्शन को निर्धारित करता है जिसे 'रेयर' कहा जाता है। रेयर ऑफ़सेट स्थिति से शुरू होता है और निर्दिष्ट कोण की दिशा में विस्तार होता है。

रेय( फ़ंक्शन के साथ offset-path गुण कोटि मिलाकर प्रयोग किया जाता है。

इंस्टांस

उदाहरण 1

विभिन्न कोणों के रेयर:

#square1 {
  width: 65px;
  height: 65px;
  background: येल्लो;
  offset-position: बोटम राइट;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: पिंक;
  offset-position: टॉप राइट;
  offset-path: रे(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: सैलमन;
  offset-position: बोटम लेफ्ट;
  offset-path: ray(90deg);
}

स्वयं का प्रयोग करें

उदाहरण 2

का उपयोग करके offset-path और रेय( एनिमेशन प्रभाव देखें:

 #frameDiv {
  width: 200px;
  height: 200px;
  margin: 20px;
  position: relative;
  border: solid black 1px;
  background-color: rgb(205, 242, 205);
}
#frameDiv > div {
  width: 50px;
  height: 50px;
  background-color: hotpink;
  offset-path: ray(45deg);
  animation: moveDiv 3s 3;
}
@keyframes moveDiv {
  100% { offset-distance: 100%; }
}

स्वयं का प्रयोग करें

CSS व्याकरण

रेय(विकल्प आकार कॉन्टेन अट पोजीशन)

तकनीकी विवरण

ब्राउज़र समर्थन

तालिका में वाले नंबर इस फ़ंक्शन को पूरी तरह से समर्थन देने वाले पहले ब्राउज़र का संस्करण को प्रदर्शित करते हैं。

संबंधित पृष्ठ

संदर्भ:ऑफसेट-पैथ गुण