Maison > Article > interface Web > Comment obtenir des effets d'animation simultanés d'inclinaison et de rotation dans CSS3

Comment obtenir des effets d'animation simultanés d'inclinaison et de rotation dans CSS3

不言original: 2018-06-26 15:29:142054parcourir

Cet article vous présente principalement, à travers un exemple de code, comment utiliser CSS3 pour obtenir l'effet d'animation d'inclinaison et de rotation en même temps. L'exemple de code complet est donné dans l'article. Vous pouvez voir l'effet en l'exécutant directement. Amis dans le besoin Nous pouvons en tirer des leçons, jetons un coup d’œil ci-dessous.

Regardez d'abord l'effet statique, l'effet après la course est meilleur

L'exemple de code est le suivant

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
 <title>css3学习</title>
 <style type="text/css">
 .d{width: 200px;height: 200px;border-radius: 50%;border: 2px solid red;border-left-color: green;border-right-color: blue;
  -webkit-animation:abc 2s infinite linear; 
  animation:abc 2s infinite linear; 
 }
 /*chrome,Safari,ff,o测试没问题，IE11一闪一闪的*/
 @keyframes abc{
  0% {transform:skew(20deg) rotate(0deg);} 
    50% {transform:skew(20deg) rotate(180deg);} 
    100% {transform:skew(20deg) rotate(360deg);} 
 }
 @-webkit-keyframes abc{
  0% {-webkit-transform:skew(20deg) rotate(0deg);} 
    50% {-webkit-transform:skew(20deg) rotate(180deg);} 
    100% {-webkit-transform:skew(20deg) rotate(360deg);} 
 }
 </style>
</head>
<body>
 <p id="abc" class="d"></p>
</body>
</html>

Ce qui précède est Tout le contenu de cet article, j'espère qu'il sera utile à l'apprentissage de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Utilisez le rayon de bordure CSS3 pour dessiner des motifs de Tai Chi et d'amour

Utilisez CSS3 pour réaliser du texte Code pour l'effet de lumière

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!

php css3 border

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment créer une ligne fine de 0,5 px en utilisant CSS3Article suivant：Comment créer une ligne fine de 0,5 px en utilisant CSS3

Articles Liés

Voir plus