Maison > Article > interface Web > Explication détaillée d'un exemple de mise en œuvre simple d'un effet d'animation de rotation CSS
Explication détaillée d'un exemple de mise en œuvre simple d'un effet d'animation de rotation CSS
- 高洛峰original
- 2017-03-03 16:55:452352parcourir
Nous pouvons créer des effets d'animation via CSS. Ce que je vais démontrer ci-dessous est la rotation de p et l'animation de transition de couleur
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title></title>
<style>
a{
text-align:center;
line-height:100px;
transition:all 2s;
width:100px;
height:100px;
background:pink;
float:left;
border-radius:50%;
}
a:hover{
transition:all 2s;
background:red;
transform-origin:50 100;
transform:rotate(360deg);
border-radius:50%;
}
</style>
</head>
<body>
<h1>请将鼠标移动到下面的矩形上：</h1>
<a>
两秒旋转360
</a>
</body>
</html>
Testez l'effet vous-même. Très magnifique !
L'article ci-dessus sur la mise en œuvre simple de l'effet d'animation de rotation CSS est tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence et j'espère que vous soutiendrez le site Web PHP chinois.
Pour des exemples plus détaillés d'implémentations simples d'effets d'animation de rotation CSS, veuillez faire attention au site Web PHP chinois pour les articles connexes !