CSS中的hover变换可以为网站增添许多美观性和交互性。下面列出了一些hover图片效果大全,希望对大家有所帮助。/* 图片放大 */ img:hover { transform: scale(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; /* 将文字颜色设为透明 */ }
粉丝
0
关注
0
收藏
0