Maison > Article > interface Web > css pour obtenir un effet d'animation en boucle d'image (code)
css pour obtenir un effet d'animation en boucle d'image (code)
- 不言original
- 2018-08-18 14:52:385667parcourir
Le contenu de cet article concerne l'effet d'animation (code) de la réalisation d'une boucle d'image via CSS. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
<style>
*{margin: 0;padding: 0;}
.robot{
width: 167px;
height: 191px;
background: url(robot.png) no-repeat;
position: absolute;
left: 0px;
top: 20px;
animation:robotmove 10s linear infinite;
}
/*循环翻身*/
@keyframes robotmove{
0%{}
49%{transform:rotateY(0deg);}/*保障前面百分之四十九图片不会中途翻转*/
50%{left:1000px; transform:rotateY(180deg);}/*49%-50%图片翻转*/
100%{left:0px; transform:rotateY(180deg);}/*保障后百分之五十都是翻转了180度的形状*/
}
/*一直一个方向、无翻转*/
@keyframes robotmove2{
0%{}
100%{left: 1100px;}
}
/*兼容前面加-webkit*/
</style>
</head>
<body>
<p class="robot"></p>Recommandations associées :
Animation CSS3 pour obtenir 5 effets d'animation de préchargement
Utilisation de CSS+jquery pour obtenir Effet de glissement d'image_html/css_WEB-ITnose
Partager le code d'effet d'une animation de cycle de zoom avant et arrière en cercle CSS3
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