CSS3控制图片效果渐变

CSS3控制图片效果渐变

下边是动画样式

 

.anim_image {
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    -o-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    cursor:pointer;
}

 

解释一下 使用的是CSS3 的transition特效, 0.6s是时间 其他固定写就可以

下边是图片黑白渐变效果样式.

.gray { 
 -webkit-filter: grayscale(100%); 
 -moz-filter: grayscale(100%); 
 -ms-filter: grayscale(100%); 
 -o-filter: grayscale(100%); 
 filter: grayscale(100%); 
 filter: gray; 
}
.gray:hover { 
 -webkit-filter: grayscale(0%); 
 -moz-filter: grayscale(0%); 
 -ms-filter: grayscale(0%); 
 -o-filter: grayscale(0%); 
 filter: grayscale(0%); 
 filter: inherit;
}