communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
Maison > interface Web > tutoriel CSS > 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

高洛峰
Libérer： 2017-03-03 16:55:45
original
2367 Les gens l'ont consulté

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>
Copier après la connexion

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 !

Étiquettes associées：
css 旋转 动画
source：php.cn
Article précédent：Introduction récapitulative de l'arrière-plan CSS Article suivant：Explication détaillée des règles de dénomination CSS couramment utilisées
Déclaration de ce site Web
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
Derniers articles par auteur
Derniers numéros
Afficher les panneaux latéraux masqués : coché J'aimerais avoir un menu de navigation dans le panneau latéral avec la possibilité de pass...
Depuis 2024-04-06 15:49:33
0
1
319
L'animation de la carte de survol d'image à l'aide de CSS Tailwind ne fonctionne pas comme prévu. <html><body><divclass="groupcardmy-14mx-3w-80h-100bg-gray-800rounded-x...
Depuis 2024-04-06 13:43:17
0
1
356
Div faire pivoter et développer à l'aide de JavaScript pour afficher la galerie de grilles Je veux qu'un div pivote en cliquant pour afficher la galerie de grilles au dos. Honnêteme...
Depuis 2024-04-02 23:12:45
0
1
404
Vanilla JS setTimeout() : identifier un mauvais comportement J'ai une animation sur mon menu hamburger écrite en HTML, CSS et JavaScript vanille. Résul...
Depuis 2024-04-02 20:44:40
0
1
284
La vibration et l'animation de l'image ne fonctionnent pas CSS document.addEventListener('scroll',function(){constnavbar=document.querySelector(".na...
Depuis 2024-04-02 20:07:39
0
1
349
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal