css3hover15种

CSS3是当前最新的CSS标准版本，而CSS3的鼠标悬停样式效果也是非常受欢迎的一种应用。以下分享15个基于CSS3技术实现的鼠标悬停动画效果。

/*1. 水平翻转*/.hover-effect-1:hover {
    transform: rotateY(180deg);
}
/*2. 垂直翻转*/.hover-effect-2:hover {
    transform: rotateX(180deg);
}
/*3. 突出*/.hover-effect-3:hover {
    transform: scale(1.2);
}
/*4. 缩小*/.hover-effect-4:hover {
    transform: scale(0.8);
}
/*5. 旋转*/.hover-effect-5:hover {
    transform: rotate(45deg);
}
/*6. 移动*/.hover-effect-6:hover {
    transform: translate(20px, 20px);
}
/*7. 阴影*/.hover-effect-7:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
/*8. 透明度*/.hover-effect-8:hover {
    opacity: 0.5;
}
/*9. 边框*/.hover-effect-9:hover {
    border: 2px solid blue;
}
/*10. 背景*/.hover-effect-10:hover {
    background-color: yellow;
}
/*11. 表格*/.hover-effect-11:hover td {
    background-color: pink;
}
/*12. 圆角*/.hover-effect-12:hover {
    border-radius: 50%;
}
/*13. 旋转缩放*/.hover-effect-13:hover {
    transform: rotate(45deg) scale(2);
}
/*14. 模糊*/.hover-effect-14:hover {
    filter: blur(3px);
}
/*15. 透明度变化*/.hover-effect-15:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
    

以上15种鼠标悬停动画效果都是基于CSS3技术实现的，非常简单便捷，同时也提高了网页的交互性和美观性，希望对您有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！