CSS3 implémente des effets d'animation d'inclinaison et de rotation-tutoriel CSS-php.cn

CSS3 implémente des effets d'animation d'inclinaison et de rotation

php中世界最好的语言

Libérer： 2018-03-22 17:49:25

original

6010 Les gens l'ont consulté

Cette fois, je vais vous présenter l'effet d'animation CSS3. Quelles sont les précautions pour mettre en œuvre l'effet d'animation d'inclinaison et de rotation CSS3. Voici les cas pratiques. jetez un oeil une fois.

Regardez d'abord l'effet de 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>

Copier après la connexion

Je crois vous lirez le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Mise en page fixe à gauche et mise en page adaptative à droite

Disposition du flux en cascade et effet d'album photo à chargement infini

Solution compatible IE pour le filtre de transparence d'opacité

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!