css3 hover动画

CSS3的出现使得Web设计的许多方面都得到了大幅度的提升，特别是在动画效果方面，CSS3帮助我们实现了更多更丰富的动画效果。其中最常用的一种动画效果就是hover动画。hover动画指的是鼠标经过某个元素时该元素会出现一定的动画效果。下面我们来介绍一些常见的hover动画效果。

/* 图片变暗 */img:hover {
        opacity: 0.5;
}
/* 图片放大 */img:hover {
        transform: scale(1.2);
}
/* 背景色变换 */div:hover {
        background-color: #ff0000;
}
/* 文字颜色变换 */a:hover {
        color: #ff0000;
}
/* 边框宽度变换 */div:hover {
        border-width: 10px;
}
/* 文字下划线 */a:hover {
        text-decoration: underline;
}
/* 文字位置变化 */h1:hover {
        margin-top: 50px;
}
    

上述代码为常见的hover动画效果的代码示例，我们可以根据实际需要进行修改和调整，达到自己想要的动画效果。

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