CSS ray() ਫੰਕਸ਼ਨ

ਪਰਿਭਾਸ਼ਿਤ ਅਤੇ ਵਰਤੋਂ

CSS ray() CSS ਫੰਕਸ਼ਨ ਰੇਡੀਓ() ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦਾ ਹੈ ਜਿਸ ਨਾਲ ਏਕਸਪੋਜ਼ਰਰ ਅਣੂਕਰਣ ਦਾ ਰਸਤਾ ਨਾਲ ਪਰਿਭਾਸ਼ਿਤ ਹੁੰਦਾ ਹੈ, ਜਿਸ ਨੂੰ 'ਰੇਡੀਓ' ਕਿਹਾ ਜਾਂਦਾ ਹੈ। ਰੇਡੀਓ ਆਫ਼ਸੈਟ ਸਥਾਨ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦਾ ਹੈ ਅਤੇ ਨਿਰਦਿਸ਼ਟ ਕੋਣ ਦੀ ਦਿਸ਼ਾ ਵਿੱਚ ਵਧਦਾ ਹੈ。

ray() ਫੰਕਸ਼ਨ ਨਾਲ 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 ਅਤੇ ray() ਐਨੀਮੇਸ਼ਨ ਦਾ ਪ੍ਰਭਾਵ ਪੈਦਾ ਕਰੋ:

 #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 ਗਰੇਫਿਕ

ray(angle size contain at position)

ਤਕਨੀਕੀ ਵੇਰਵੇ

ਬਰਾਊਜ਼ਰ ਸਮਰਥਨ

ਸਤਰ ਵਿੱਚ ਸੰਖਿਆ ਪਹਿਲੀ ਵਾਰ ਇਸ ਫੰਕਸਨ ਨੂੰ ਸਮਰਥਨ ਕਰਨ ਵਾਲੀ ਬਰਾਊਜ਼ਰ ਵਰਜਨ ਦਿਸਦੀ ਹੈ。

ਸਬੰਧਤ ਪੰਨੇ

ਸਲਾਹਦਾਤਾ:offset-path ਪ੍ਰਤੀਯੋਗਿਤਾ