CSS ray() -funktio

Määrittely ja käyttö

CSS ray() Funktiot määrittelevät animaatioelementin noudattaman siirtymäpolun, joka kutsutaan 'säteeksi'. Säde alkaa siirtymäpaikasta ja jatkuu annetun kulman suuntaan.

ray() Funktiot ja offset-path Ominaisuudet käytetään yhdessä.

Esimerkki

Esimerkki 1

Erilaisia kulmia säteille:

#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);
}

Kokeile itse

esimerkki 2

käyttäen offset-path ja ray() Toteuta animaatioefekti:

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

Kokeile itse

CSS-grammatiikka

ray(angle size contain at position)
Arvo Kuvaus
angle Välttämätön. Määritä säteen suunta/kulma.
size

Valinnainen. Määritä säteen pituus, eli etäisyys sisällyttävän lohkon offset-distance 0% - 100% välillä.

Se hyväksyy seuraavista avainsanoista yhden:

  • closest-side - (oletusarvo) Säteen lähtökohta ja sisällyttävän lohkon lähimmän reunan välinen etäisyys
  • closest-corner - Säteen lähtökohta ja sisällyttävän lohkon lähimmän kulman välinen etäisyys
  • farthest-side - Säteen lähtökohta ja sisällyttävän lohkon kaukaisen reunan välinen etäisyys
  • farthest-corner - Säteen lähtökohta ja sisällyttävän lohkon kaukaisen kulman välinen etäisyys
  • sides - Säteen lähtökohta ja säteen osan sisällyttävän lohkon reunan risteyspisteiden välinen etäisyys
contain Valinnainen. Lyhennä säteen pituutta, jotta elementti pysyy sisällyttävän lohkon sisällä edes offset-distance: 100% -tilanteessa.
at position

Valinnainen. Määritä säteen lähtökohta sekä elementin sijoitus sisällyttävässä lohkossa.

Jos jätetään pois, käytetään elementin offset-position-arvoa.

Jos elementillä ei ole offset-position-arvoa, elementti sijoitetaan sisällyttävän lohkon keskelle (eli 50% 50%).

Tekninen yksityiskohta

Versio: CSS Motion Path Module Taso 1

Selaimen tuki

Taulukossa olevat numerot ilmaisevat ensimmäisen selaimen version, joka täysin tukee tätä toimintoa。

Chrome Edge Firefox Safari Ooppera
116 116 122 17 102

Aiheeseen liittyvät sivut

Viittaus:offset-path ominaisuus