Maison > Article > interface Web > CSS3 implémente des effets d'animation d'inclinaison et de rotation
CSS3 implémente des effets d'animation d'inclinaison et de rotation
- php中世界最好的语言original
- 2018-03-22 17:49:255915parcourir
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>
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!