a{width:150px;height:150px;display:inline-block;}
img{border-radius:20px;width:100%;height:100%;transition: all 2s;}
.c1:hover{filter:blur(5px);-webkit-filter: blur(5px);}/* 模糊度 */
.c2:hover{filter:grayscale(1);-webkit-filter:grayscale(1);}/* 灰度 */
.c3:hover{filter:brightness(2.3);-webkit-filter:brightness(2.3);}/* 亮度 */
.c4:hover{
filter:contrast(3.6);-webkit-filter:contrast(3.6);-ms-filter:contrast(3.6);
}/* 对比度*/
.c5:hover{filter:saturate(3.6);-webkit-filter:saturate(3.6);}/* 饱和度*/
.c6:hover{filter:hue-rotate(185deg);-webkit-filter:hue-rotate(185deg);}/* 色相旋转*/
.c7:hover{filter:invert(1);-webkit-filter:invert(1);}/* 反色 */
.c8:hover{filter:sepia(0.77);-webkit-filter:sepia(0.77);}/* 褐色 */
一键复制
编辑
Web IDE
原始数据
按行查看
历史