Comment implémenter des effets d'animation de rotation et de mouvement en CSS3-connaissance CSS-php.cn

Comment implémenter des effets d'animation de rotation et de mouvement en CSS3

藏色散人

Libérer： 2019-11-30 16:38:37

original

8448 Les gens l'ont consulté

Cet article vous présente principalement la méthode de réalisation d'effets de rotation avec une animation css3.

CSS est une feuille de style en cascade, et les amis qui apprennent le front-end doivent la connaître très bien. Eh bien, tout le monde devrait savoir qu’un effet d’animation sympa peut donner à votre site Web un aspect plus sophistiqué et enrichir le contenu pour attirer les utilisateurs.

Nous allons maintenant vous présenter un effet spécial d'animation simple et intéressant, qui consiste à obtenir l'effet de rotation de l'image.

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
    <style>
.main{
    width: 100px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    border-radius: 20px;
    background: red;
    position: relative;
    top: 30px;
    animation: asd 5s;
}
        @keyframes asd {
            0 %{transform: rotate(0deg);}
            25%{transform: rotate(60deg);left: 0px;}
            50%{left:500px;}
            75%{transform: rotate(-520deg);}
            100%{transform: rotate(0deg);left: 0px;}
        }
 </style>
</head>
<body>

<div class="main">
    动画
</div>
</body>
</html>

Copier après la connexion

L'effet est le suivant :

Comment implémenter des effets danimation de rotation et de mouvement en CSS3

Introduction aux attributs importants pertinents en CSS3 :

transformation :

L'attribut de transformation signifie appliquer une transformation 2D ou 3D à l'élément, qui peut faire pivoter, mettre à l'échelle, déplacer ou incliner l'élément.

@keyframes :

Avec les règles @keyframes, vous pouvez créer des animations. En d’autres termes, les @keyframes ne sont utilisées ici que pour définir des animations et n’ont aucune signification réelle.

Le principe de mise en œuvre de l'animation CSS est de passer progressivement d'un style CSS à un autre style CSS.

Il précise l'heure à laquelle le changement se produit sous forme de pourcentage (ou "de" et "à"). (0 % est l'heure de début de l'animation, 100 % est l'heure de fin de l'animation.)

Tant que vous maîtrisez les principes de l'animation CSS, il est très facile d'obtenir les effets les plus intéressants grâce au CSS pur.

Cet article est une introduction à la méthode spécifique pour obtenir des effets de rotation et de mouvement dans l'animation CSS3. Il est simple et facile à comprendre. J'espère qu'il sera utile aux amis dans le besoin !

D'autres codes d'effets spéciaux CSS3, html5 et javascript sont disponibles sur : Encyclopédie des effets spéciaux Javascript

Si vous souhaitez en savoir plus sur le front-end connaissances connexes, vous pouvez suivre le site Web PHP chinois Tutoriel vidéo CSS3, Tutoriel vidéo CSS, Tutoriel Bootstrap et d'autres tutoriels connexes, invitez tout le monde à se référer et à apprendre !

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!