Maison >interface Web >tutoriel CSS >Que sont les propriétés d'animation CSS3 ? Comment y parvenir
Que sont les propriétés d'animation CSS3 ? Comment y parvenir
- 云罗郡主avant
- 2018-10-16 14:36:282445parcourir
Le contenu de cet article porte sur quelles sont les propriétés de l'animation CSS3 ? Comment y parvenir 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.
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 attribut 1 tourne autour de cet axe angle deg
<!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>
<div>
<img src="imgs/sprite_43.png" alt="">
<img src="imgs/shape_45.png" alt="">
<img src="imgs/shape_46.png" alt="">
</div>
<div>
<img src="imgs/sprite_40.png">
</div>
<div>
<img src="imgs/shape_41.png">
</div>
</div>
</body>
</html>Ce qui précède est une introduction complète aux attributs d'animation CSS3. Quoi? Comment l'implémenter ? Si vous souhaitez en savoir plus sur le Tutoriel 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!