ypiresis CSS ray()

definisi kai xrisi

CSS ray() H ypiresis CSS definoi ta pathes sygchysis toy kinhtou ymeromeneis gia tin klisi, pou kallithei 'rayos'. O rayos arxizei apo tin allagh toponymou kai ekteinei se diadromi tou orizonta tou oikonomou megistiou.

ray() ypiresies me offset-path ypiresies enomaston.

instance

example 1

rayos me onomastiki ton megistwn goniai:

#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(γωνία μέγεθος περιεχόμενο σε Θέση)
Τιμή Περιγραφή
γωνία Απαιτείται. Ορίζει τη κατεύθυνση/το γωνία του ακινήτου.
μέγεθος

Προαιρετικό. Ορίζει τη μήκος του ακινήτου, δηλαδή την απόσταση από το offset-distance 0% μέχρι 100% από το περιεχόμενο.

Αποδέχεται μια από τις εξής κλειδιά τιμές:

  • πιο κοντή πλευνή - (προεπιλεγμένο) η απόσταση από τον αρχικό σημείο του ακινήτου μέχρι το πιο κοντό πλευνή του περιεχομένου
  • πιο κοντή γωνία - η απόσταση από τον αρχικό σημείο του ακινήτου μέχρι το πιο κοντό γωνία του περιεχομένου
  • πιο μακρινό πλευνή - η απόσταση από τον αρχικό σημείο του ακινήτου μέχρι το πιο μακρινό πλευνή του περιεχομένου
  • πιο μακρινό γωνία - η απόσταση από τον αρχικό σημείο του ακινήτου μέχρι το πιο μακρινό γωνία του περιεχομένου
  • πλευνές - η απόσταση από τον αρχικό σημείο του ακινήτου μέχρι το σημείο όπου το ακίνημα διέρχεται από τα όρια του περιεχομένου
περιεχόμενο Προαιρετικό. Κατακρύπτει τη μήκος του ακινήτου, ώστε να παραμένει το στοιχείο μέσα στο περιεχόμενο ακόμα και όταν το offset-distance: 100%;
σε Θέση

Προαιρετικό. Ορίζει τον αρχικό σημείο του ακινήτου και τη θέση του στοιχείου μέσα στο περιεχόμενο.

Αν παραλείπεται, χρησιμοποιείται η τιμή offset-position του στοιχείου.

Αν το στοιχείο δεν έχει τιμή offset-position, το στοιχείο τοποθετείται στο κέντρο του περιεχομένου (δηλαδή 50% 50%).

Τεχνικά στοιχεία

Έκδοση: Μονόλεπτο Μονοπάτι Κινήσεων CSS Στάθμης 1

Υποστήριξη περιηγητή

Ο αριθμός στην τράπεζα δείχνει την έκδοση του περιηγητή που υποστηρίζει πλήρως τη συνάρτηση.

Χρόμες Ετζ Φάιρεξ Σάφάρι Οπερά
116 116 122 17 102

Σχετικές σελίδες

Αναφορά:Ιδιότητα του offset-path