html 图片style,图片style.html

图片style

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

原始数据

按行查看

历史