CSS ray() ఫంక్షన్

నిర్వచనం మరియు ఉపయోగం

CSS రేయిన్() ఫంక్షన్ దాని సమయంలో ఏది ప్రవర్తించే విధంగా వివరించబడుతుంది. ఈ లైన్ ను 'రే' అని పిలుస్తారు. రే స్థానం నుండి ప్రారంభం అవుతుంది మరియు ప్రస్తావించిన కోణం దిశలో విస్తరిస్తుంది.

రేయిన్() ఫంక్షన్ మరియు offset-path అంశాలు కలిసి ఉపయోగించడం.

ఇన్స్టాన్స్

ఉదాహరణ 1

వివిధ కోణాలు యొక్క రేయ్:

#square1 {
  width: 65px;
  height: 65px;
  background: yellow;
  offset-position: bottom right;
  offset-path: ray(45deg);
}
#square2 {
  width: 65px;
  height: 65px;
  background: pink;
  offset-position: top right;
  offset-path: ray(-25deg);
}
#square3 {
  width: 65px;
  height: 65px;
  background: salmon;
  offset-position: bottom left;
  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 సంకేతాలు

రేయిన్(ఏంజిల్ సైజ్ కంటైన్ అట్ పోజిషన్)

సాంకేతిక వివరాలు

బ్రౌజర్ మద్దతు

పట్టికలో ఉన్న సంఖ్యలు ఈ ఫంక్షన్ పూర్తిగా మద్దతు ఇచ్చే మొదటి బ్రౌజర్ సంస్కరణను సూచిస్తాయి。

相关页面

参考：offset-path 属性