Comment utiliser le CSS pour obtenir un effet circulaire ? (exemple de code)-tutoriel CSS-php.cn

Comment utiliser le CSS pour obtenir un effet circulaire ? (exemple de code)

云罗郡主

Libérer： 2018-10-23 15:13:40

avant

2158 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser les CSS pour obtenir un effet circulaire ? (Exemple de code) a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère que cela vous sera utile.

Nous savions auparavant que les effets d'animation CSS3 se composent de trois parties principales : la transformation, la transition et l'animation. Dans les 2 premiers chapitres, nous avons expliqué en détail l’effet de déformation et l’effet de transition. Dans ce chapitre, nous expliquerons le « vrai » effet d'animation en CSS3.

En CSS3, les effets d'animation sont implémentés à l'aide de l'attribut animation. L'attribut d'animation et l'attribut de transition ont la même fonction. Ils obtiennent tous deux des effets d'animation en modifiant la « valeur d'attribut » de l'élément. Mais il y a une grande différence entre les deux : l'attribut de transition ne peut obtenir des effets d'animation qu'en spécifiant la valeur de début et la valeur de fin de l'attribut, puis en effectuant une transition en douceur entre les deux valeurs d'attribut, de sorte que seuls des effets d'animation simples peuvent être obtenus. . La propriété animation implémente des effets d'animation complexes en définissant plusieurs images clés et en définissant les valeurs d'attribut des éléments dans chaque image clé.

Le paragraphe ci-dessus est très précieux et couvre la réponse à la question la plus déroutante pour les novices : « Quelle est la différence entre les attributs d'animation et les attributs de transition ? Vous ne le comprendrez peut-être pas au début, mais après avoir lu ce chapitre, vous devez revenir le lire attentivement !

Prenons d’abord un exemple pour permettre à chacun de ressentir la magie des effets d’animation CSS3.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3动画</title>
    <style type="text/css">
        div
        {
            width:100px;
            height:100px;
            border-radius:50px;
            background-color:red;
        }
        @-webkit-keyframes mycolor
        {
            0%{background-color:red;}
            30%{background-color:blue;}
            60%{background-color:yellow;}
            100%{background-color:green;}
        }
        div:hover
        {
            -webkit-animation-name:mycolor;
            -webkit-animation-duration:5s;
            -webkit-animation-timing-function:linear;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Copier après la connexion

L'effet d'aperçu dans le navigateur est le suivant :

Comment utiliser le CSS pour obtenir un effet circulaire ? (exemple de code)

Analyse :

Comme vous pouvez le voir, il y a un div ici. Sa couleur d'arrière-plan est rouge Lorsque le pointeur de la souris se déplace sur l'élément div, la couleur d'arrière-plan de l'élément subit une série de changements du rouge au bleu, du bleu au jaune et du jaune au rouge.

Pensez-y, si on vous demandait d'utiliser l'attribut de transition CSS3, pourriez-vous y parvenir ? Bien sûr que non. Parce que l'attribut de transition ne peut produire qu'un seul effet de changement. On peut comprendre que l'attribut transition ne peut implémenter qu'une animation simple (une), tandis que l'attribut animation peut implémenter une animation complexe (une série).

Ce qui précède est une introduction à la façon d'utiliser les CSS pour obtenir un effet circulaire ? (Exemples de code) introduction complète, si vous souhaitez en savoir plus sur les Tutoriels vidéo CSS3, veuillez faire attention au site Web PHP chinois.

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!