十五种css3鼠标hover效果
时间: 2023-12-04 09:49:47 浏览: 221
好的,以下是十五种CSS3鼠标hover效果:
1. 放大效果:使用transform:scale()属性实现。
2. 旋转效果:使用transform:rotate()属性实现。
3. 渐变效果:使用background-image属性和linear-gradient()函数实现。
4. 模糊效果:使用filter:blur()属性实现。
5. 反转颜色效果:使用filter:invert()属性实现。
6. 透明度变化效果:使用opacity属性实现。
7. 移动效果:使用transition和transform:translate()属性实现。
8. 阴影效果:使用box-shadow属性实现。
9. 文字描边效果:使用text-stroke属性实现。
10. 文字变色效果:使用text-fill-color和-webkit-background-clip:text属性实现。
11. 边框动画效果:使用transition和border-image属性实现。
12. 悬浮框效果:使用::before和::after伪元素实现。
13. 背景颜色渐变效果:使用background-color和transition属性实现。
14. 3D立体效果:使用transform-style:preserve-3d和perspective属性实现。
15. 组合效果:以上效果可以组合使用,如旋转+放大、渐变+透明度变化等等。
阅读全文