The content of this article is about the animation effect (code) of css to realize image loop. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.
<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>Related recommendations:
CSS3 animation to achieve 5 preload animation effects
Use css jquery to achieve image sliding effect _html/css_WEB-ITnose
Share the effect code of a CSS3 circle zoom-in and zoom-out loop animation
The above is the detailed content of css to achieve image loop animation effect (code). For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
