HTML5 + CSS3 pur pour créer une rotation d'image-tutoriel CSS-php.cn

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

不言

Libérer： 2018-06-05 15:00:04

original

1864 Les gens l'ont consulté

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>

Copier après la connexion

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!