Maison > Article > interface Web > Comment utiliser les propriétés d'animation CSS3

Comment utiliser les propriétés d'animation CSS3

php中世界最好的语言original: 2017-11-24 10:36:071583parcourir

Aujourd'hui, nous allons vous expliquer comment utiliser l'attribut Transform animation et ses techniques d'utilisation. À quels aspects faut-il prêter attention lors de l'utilisation des attributs d'animation ? Laissez-moi vous donner un petit exemple ci-dessous.

Propriété d'animation Transform

La propriété transform applique une transformation 2D ou 3D à un élément. Cette propriété nous permet de faire pivoter, redimensionner, déplacer ou incliner l’élément.

rotate3d(x,y,z,angle) x,y,z l'attribut 1 tourne autour de cet axe angle deg

@ nom des images clés effet prédéfini

l'attribut d'animation est un attribut raccourci permettant de définir six attributs d'animation :

case

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
</head>
<style type="text/css">
*{
      margin:0px;
      padding:0px;    
}
img{ display:block;}
.wrap{
      border:1px solid #ff0000;
      width:380px;
      height:565px;
      margin:0 auto;
      position:relative;
      top:50px;   
      -webkit-animation:upDown 2s linear infinite;
}
@-webkit-keyframes upDown{
      0%{-webkit-transform:translateY(0);}     
      50%{-webkit-transform:translateY(20px);}
      100%{-webkit-transform:translateY(0px);}
}
@-webkit-keyframes rota_head{
      0%{-webkit-transform:rotate(0);}    
      50%{-webkit-transform:rotate(-5deg);}
      100%{-webkit-transform:rotate(0);}
}
.head{
      border:1px solid #ff0000;
      position:absolute;
      top:10px;
      left:0;
      z-index:1;   
      -webkit-animation:rota_head 2s linear infinite;
}
@-webkit-keyframes eye_open{
      0%{opacity:1;}
      85%{opacity:1;}
      90%{opacity:0;}     
      100%{opacity:1;}   
}
.eye_open{
      position:absolute;
      top:25px;
      left:40px;
      -webkit-animation:eye_open 2s linear infinite;
}
@-webkit-keyframes eye_close{
      0%{opacity:0;}
      85%{opacity:0;}
      90%{opacity:1;}     
      100%{opacity:0;}   
}
.eye_close{
      position:absolute;
      top:37px;
      left:40px;   
      -webkit-animation:eye_close 2s linear infinite;
 
}
.body{
      position:absolute;top:25px;left:8px;
}
.foot{ position:absolute;left:8px;bottom:0px;}
  </style>
<body>
<div class="wrap">
      <div class="head">
          <img src="imgs/sprite_43.png" alt="">
        <img src="imgs/shape_45.png" alt="" class="eye_open">
        <img src="imgs/shape_46.png" alt="" class="eye_close">
    </div>
    <div class="body">
          <img src="imgs/sprite_40.png">
    </div>
    <div class="foot">
          <img src="imgs/shape_41.png">
    </div>
</div>
</body>
</html>

Animation CSS3. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les sélecteurs d'attributs et les sélecteurs de pseudo-classe

Comment utiliser l'ombre de police CSS3 text-shadow

Comment utiliser CSS3 box-shadow

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：Comment utiliser les sélecteurs d'attributs et les sélecteurs de pseudo-classeArticle suivant：Comment utiliser les sélecteurs d'attributs et les sélecteurs de pseudo-classe

Articles Liés

Voir plus