[分享]css做图片左右移动动画

CSS做图片左右移动动画是前端开发中常见的效果之一，它能够给网页带来更加生动的视觉效果。下面我们来看一下具体的实现方法。/ 首先需要设置图片的初始位置 / img{ :absolute; left:0...

CSS做图片左右移动动画是前端开发中常见的效果之一，它能够给网页带来更加生动的视觉效果。下面我们来看一下具体的实现方法。

/* 首先需要设置图片的初始位置 */
img{
  position:absolute;
  left:0px;
}
/* 然后设置动画效果的具体实现 */
@keyframes move {
  0% {left: 0px;}
  50% {left: 300px;}
  100% {left: 0px;}
}
/* 最后将动画应用在图片上 */
img{
  animation-name: move;
  animation-duration: 2s;  /*动画持续时间*/
  animation-timing-function: ease-in-out; /*动画速度变化*/
  animation-iteration-count: infinite; /*动画循环次数*/
  animation-direction: alternate; /*动画来回循环*/
} 

采用CSS做图片左右移动动画能够使页面更加生动，同时也可以提高页面用户体验，为网站增添活力。