CSS ray() -funktio
- Edellinen sivu CSS radial-gradient() funktio
- Seuraava sivu CSS rem() funktio
- Palaa ylös CSS funktioviittauskäsikirja
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); }
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%; } }
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:
|
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
- Edellinen sivu CSS radial-gradient() funktio
- Seuraava sivu CSS rem() funktio
- Palaa ylös CSS funktioviittauskäsikirja