用css给图片加入动态效果的各种简单样式代码

/* 图像翻转 */
img:hover {
transform: scaleX(-1); /* 沿着x轴翻转 */
}
/* 图像旋转 */
img:hover {
transform: rotate(45deg); /* 逆时针旋转45度 */
}
/* 图像放大缩小 */
img:hover {
transform: scale(1.2); /* 宽高放大1.2倍 */
}
/* 图像透明度变化 */
img:hover {
opacity: 0.5; /* 不透明度变为50% */
}
/* 图像边框变色 */
img:hover {
border-color: red; /* 边框颜色变为红色 */
}
/* 图像闪烁 */
img:hover {
animation: blink 1s infinite; /* 调用动画 */
}
@keyframes blink {
from {
opacity: 1; /* 起始不透明 */
}
to {
opacity: 0; /* 结束全透明 */
}
}
/* 图像滤镜 */
img:hover {
filter: grayscale(100%); /* 灰度滤镜 */
}