[分享]css中怎么弄图片播动

在CSS中，有许多方法来实现图片的播动效果。本文将介绍其中两种方法，分别是使用CSS3的动画属性和使用JavaScript编写动画效果。 CSS3动画属性CSS3中提供了一些动画属性，可以用来制作图片...

在CSS中，有许多方法来实现图片的播动效果。本文将介绍其中两种方法，分别是使用CSS3的动画属性和使用JavaScript编写动画效果。 CSS3动画属性CSS3中提供了一些动画属性，可以用来制作图片等元素的动画效果。其中比较常见的有transition和animation两个属性。 下面我们以transition示例，创建一个图片缩放的效果：

img {
   transition: all .5s ease-in-out;
}

img:hover {
   transform:scale(1.2);
} 

以上代码表示，在标签下定义transition属性，当鼠标悬停在图片上时，执行scale()函数，使图片缩放至原大小的1.2倍。 如果需要让多张图片轮番播放，可以使用animation属性来定义动画关键帧。以下是一个制作图片旋转效果的示例：

@keyframes rotate{
   0%{transform: rotate(0deg);}
   100%{transform:rotate(360deg);}
}

img{
   animation: rotate 2s linear infinite;
} 

以上代码表示，在keyframes中定义动画关键帧rotate，使图片在0%到100%的时间段内旋转360度。然后，使用animation属性来指定动画名和持续时间，使图片按顺序执行动画，且反复重复执行。 JavaScript动画编写使用JavaScript编写动画可以实现更加复杂的效果。以下是一个图片滑动的示例：

var img = document.getElementById("slide");
var position = 0;  //图片初始位置

setInterval(slideImage,20);

function slideImage(){
   position -= 1;  // 每0.02秒向左移动1像素
   img.style.left = position + "px";

   if (position == -300){  // 图片移动到-300像素时，重置位置
      position = 0;
   }
} 

以上代码表示，在JavaScript中使用setInterval函数对slideImage方法进行周期性调用，以达到图片滑动的效果。其中，position变量记录图片的位置，每0.02秒向左移动1像素，当图片移动到-300像素时，重新设置位置。