Maison >interface Web >tutoriel CSS >HTML5 + CSS3 pur pour créer une rotation d'image

HTML5 + CSS3 pur pour créer une rotation d'image

不言original: 2018-06-05 15:00:041871parcourir

Cet article présente principalement du HTML5+CSS3 pur pour produire une rotation d'image. Certains effets spéciaux d'animation obtenus par HTML5 combinés avec CSS3 sont relativement faciles à mettre en œuvre. Les amis intéressés peuvent se référer à

Cet exemple peut être appliqué. très pratique dans de nombreux projets et j'espère que tout le monde pourra le maîtriser.

Le rendu est le suivant :

Cet effet n'est en réalité pas difficile à réaliser. La liste des codes est la suivante :

<.>Code XML/HTMLCopier le contenu dans le presse-papiers

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #liu{     
            width:280px;     
            height: 279px;     
            background: url(shishi.png) no-repeat;     
            border-radius:140px;     
            -webkit-animation:run 6s linear 0s infinite;     
        }     
        #liu:hover{     
            -webkit-animation-play-state:paused;     
        }     
        @-webkit-keyframes run{     
            from{     
                -webkit-transform:rotate(0deg);     
            }     
            to{     
                -webkit-transform:rotate(360deg);     
            }     
        }     
    </style>
</head>
<body>
    <p id="liu"></p>
</body>
</html>

1. p avec id liu est la zone utilisée pour afficher les images, mais les images ici C'est l'image d'arrière-plan utilisée, et l'effet arrondi est obtenu en définissant des coins arrondis.

2. La partie clé du code est de savoir comment faire pivoter l'image à l'infini. Nous pouvons utiliser -webkit-animation et @-webkit-keyframes en combinaison pour y parvenir.

-webkit-animation est un attribut composite, défini comme suit :

-webkit-animation : nom durée timing-function delay iteration_count direction ;

name : oui La méthode doit être spécifiée dans @-webkit-keyframes pour effectuer une animation.

durée : La durée d'exécution de l'animation en un cycle.

fonction de synchronisation : l'effet de l'exécution de l'animation peut être linéaire, ou il peut être "une entrée rapide et une sortie lente", etc.

delay : La durée de l'exécution du retard de l'animation.

iteration_count : Le nombre de fois d'exécution de la boucle d'animation Si elle est infinie, elle sera exécutée à l'infini.

direction : direction d'exécution de l'animation.

3. Les deux attributs from et to dans @-webkit-keyframes spécifient la valeur initiale et la valeur finale de l'exécution de l'animation.

4. -webkit-animation-play-state:paused; Met en pause l'exécution de l'animation.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à tout le monde pour obtenir des effets spéciaux de rotation d'image.

Recommandations associées :

Exemple de code pour HTML5 pour générer un effet d'histogramme (graphique à barres)

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!

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：Exemple de code pour désactiver les événements de clic de souris en utilisant du CSS purArticle suivant：Exemple de code pour désactiver les événements de clic de souris en utilisant du CSS pur

Articles Liés

Voir plus