[分享]css中hover图片的效果大全

CSS中的hover变换可以为网站增添许多美观性和交互性。下面列出了一些hover图片效果大全，希望对大家有所帮助。/ 图片放大 / img:hover { transform: scale(1.1)...

CSS中的hover变换可以为网站增添许多美观性和交互性。下面列出了一些hover图片效果大全，希望对大家有所帮助。

/* 图片放大 */
img:hover {
    transform: scale(1.1);  /* 将图片放大10% */
}

/* 图片变暗 */
img:hover {
    filter: brightness(70%);  /* 降低图片亮度为70% */
}

/* 图片变模糊 */
img:hover {
    filter: blur(2px);  /* 模糊2个像素 */
}

/* 旋转图片 */
img:hover {
    transform: rotate(90deg);  /* 将图片旋转90度 */
}

/* 图片边框样式 */
img:hover {
    border: 2px solid red;  /* 添加2像素红色边框 */
}

/* 文字上浮 */
p:hover {
    transform: translateY(-10px);  /* 将文字上浮10像素 */
}

/* 背景颜色变化 */
div:hover {
    background-color: lightblue;  /* 将背景颜色变为浅蓝色 */
}

/* 按钮变色 */
button:hover {
    background-color: #ff6600;  /* 将按钮背景颜色变为橙色 */
    color: white;  /* 将按钮文字颜色变为白色 */
}

/* 文字渐变 */
h1:hover {
    background: linear-gradient(to right, red, yellow);  /* 将文字背景颜色设置为从红色到黄色的渐变 */
    background-clip: text;  /* 将渐变裁剪为文本形状 */
    -webkit-background-clip: text;  /* Safari和Chrome需要此前缀 */
    color: transparent;  /* 将文字颜色设为透明 */
}