css中怎么给图片做动态效果

CSS（层叠样式表）是前端开发中重要的一部分，其中的动态效果对于网站的视觉效果有着极为重要的作用。本文将介绍如何给图片做动态效果。

一、使用CSS3的transform属性来实现图片旋转效果

img{
    transition: transform 0.5s ease;
}
img:hover{
    transform: rotate(90deg);
} 

二、使用CSS3的transition属性来实现图片渐变效果

img{
    transition: opacity 0.5s ease;
}
img:hover{
    opacity: 0.5;
} 

三、使用CSS3的animation属性来实现图片指定方向移动效果

img{
    position: relative;
    animation: move-right 2s ease-out infinite;
}
 
@keyframes move-right{
    0%{
        left: 0;
    }
    100%{
        left: 100%;
    }
} 

通过以上三种方法，我们可以为图片添加不同的动态效果来实现网站视觉效果的优化。