Comment implémenter le mobile en CSS3

CSS3 pour mobile

Avec la popularité des appareils mobiles et le développement d'applications Web, nous devons de plus en plus implémenter des effets mobiles dans les pages Web. CSS3 fournit de nouvelles propriétés liées aux mobiles, et cet article présentera certaines des plus couramment utilisées.

1. attribut transform

L'attribut transform peut modifier la forme, la taille, la position, etc. de l'élément. Parmi eux, la fonction de traduction peut réaliser la traduction d'éléments. Il reçoit deux paramètres, représentant respectivement la distance de translation dans les directions horizontale et verticale. Par exemple, le code suivant traduit un élément div 50 pixels vers la droite et 50 pixels vers le bas :

div {
  transform: translate(50px, 50px);
}

Vous pouvez également utiliser un pourcentage comme paramètre dans la fonction de traduction pour représenter la distance de translation par rapport à la largeur et à la hauteur de l'élément. lui-même. Par exemple, le code suivant déplace un élément div de 50 % de sa largeur et de sa hauteur vers la droite et de 50 % de sa hauteur :

div {
  transform: translate(50%, 50%);
}

2. attribut de transition

L'attribut de transition peut définir des effets de transition pour les changements d'éléments. Il reçoit quatre paramètres, représentant les attributs modifiés, le temps de transition, le type de transition et le temps de retard. Par exemple, le code suivant définit un effet de transition en douceur de 0,5 seconde pour l'attribut de transformation d'un élément div :

div {
  transition: transform 0.5s ease;
}

Lorsque la valeur de l'attribut de transformation de l'élément div change, il passera en douceur de l'état d'origine au nouveau. état, continu Le temps est de 0,5 seconde et le type de transition est facilité. Nous pouvons définir plusieurs attributs de transition en CSS. Par exemple, le code suivant définit un effet de transition pour l'attribut opacity et l'attribut transform d'un élément div :

div {
  transition: opacity 0.5s ease, transform 0.5s ease;
}

3. animation d'images clés

l'animation d'images clés peut obtenir des effets d'animation plus complexes. Il définit une chronologie et définit l’état de l’élément à différents moments. Par exemple, le code suivant définit un effet d'animation qui se déplace depuis la gauche :

@keyframes movetoright {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}

div {
  animation: movetoright 1s ease;
}

La chronologie de cette animation est divisée en plusieurs points temporels, où from représente l'état au début de l'animation et to représente l'état à la fin de l'animation. Nous pouvons définir n'importe quel nombre de points dans le temps sur la chronologie et définir différents états d'éléments à différents moments pour obtenir des effets d'animation plus diversifiés.

4. Événements tactiles

Lorsque nous interagissons sur des appareils mobiles, nous devons généralement écouter les événements tactiles. Les types d'événements tactiles suivants sont couramment utilisés :

• touchstart : déclenché lorsque le doigt commence à toucher l'écran ;
• touchmove : déclenché lorsque le doigt glisse sur l'écran ;
• touchend : déclenché lorsque le doigt quitte l'écran ;
touchcancel : annulé par le système. Déclenché lorsqu'un événement tactile se produit, comme un appel soudain, etc.

Par exemple, dans le code suivant, lorsque l'utilisateur glisse sur l'élément div, la position de l'élément div sera modifiée :

<div id="move-box">
  拖我
</div>

<script>
var box = document.getElementById('move-box');
var startX, startY, moveX, moveY;

box.addEventListener('touchstart', function(e) {
  var touch = e.touches[0];
  startX = touch.clientX;
  startY = touch.clientY;
});

box.addEventListener('touchmove', function(e) {
  var touch = e.touches[0];
  moveX = touch.clientX - startX;
  moveY = touch.clientY - startY;
  box.style.transform = 'translate(' + moveX + 'px, ' + moveY + 'px)';
});
</script>

Dans ce code, on écoute l'événement touchstart et l'événement touchmove pour obtenir l'événement initial respectivement la position et la position actuelle du doigt et calculer la distance parcourue par le doigt sur l'écran. Ensuite, en définissant l'attribut translation, l'effet de traduction de l'élément div est obtenu.

Résumé

Ce qui précède présente plusieurs des propriétés liées aux mobiles les plus couramment utilisées dans CSS3, notamment la transformation, la transition, l'animation d'images clés et les événements tactiles. Ces propriétés offrent une grande flexibilité pour mettre en œuvre une grande variété d’effets de mouvement. Lors du développement d'applications Web, nous pouvons appliquer ces attributs de manière flexible en fonction de besoins spécifiques pour créer une expérience utilisateur plus colorée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!