Fonction ray() CSS

Définition et utilisation

CSS ray() La fonction définit le segment de trajectoire de décalage que l'élément d'animation doit suivre, ce segment s'appelle 'rayon'. Le rayon commence à partir de la position de décalage et s'étend dans la direction de l'angle spécifié.

ray() Fonction avec offset-path Les propriétés sont utilisées ensemble.

Instance

Exemple 1

Rayons à angles différents :

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

Essayez-le vous-même

Exemple 2

en utilisant offset-path et ray() Réaliser l'effet d'animation :

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

Essayez-le vous-même

Syntaxe CSS

ray(angle size contain à position)
Valeur Description
angle Obligatoire. Spécifiez la direction ou l'angle du rayon.
size

Optionnel. Spécifiez la longueur du rayon, c'est-à-dire la distance entre offset-distance 0% et 100% par rapport au conteneur.

Il accepte l'une des valeurs de mots-clés suivantes :

  • closest-side - (par défaut) La distance entre le point de départ du rayon et le côté le plus proche du conteneur.
  • closest-corner - La distance entre le point de départ du rayon et le coin le plus proche du conteneur.
  • farthest-side - La distance entre le point de départ du rayon et le côté le plus éloigné du conteneur.
  • farthest-corner - La distance entre le point de départ du rayon et le coin le plus éloigné du conteneur.
  • sides - La distance entre le point de départ du rayon et le point d'intersection entre le segment et la bordure du conteneur.
contain Optionnel. Réduisez la longueur du rayon pour vous assurer que l'élément reste à l'intérieur du conteneur même si offset-distance: 100%.
à position

Optionnel. Spécifiez le point de départ de la rayon et la position de l'élément dans le conteneur.

Si elle est omise, la valeur offset-position de l'élément est utilisée.

Si l'élément n'a pas de valeur offset-position, l'élément est placé au centre du conteneur (c'est-à-dire 50% 50%).

Détails techniques

Version : Module de chemin de déplacement CSS niveau 1

Prise en charge du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opéra
116 116 122 17 102

Pages associées

Référence :Propriété offset-path