css3 鼠标过渡效果

CSS3鼠标过渡效果是一种非常流行的动画效果，可以让网站页面更生动、有趣。下面我们就来一起学习如何实现一些简单的鼠标过渡效果。

/* 鼠标移入时，改变背景颜色 */div {
    background-color: #ea6153;
    width: 100px;
    height: 50px;
    transition: background-color 0.5s ease;
}
div:hover {
    background-color: #2c3e50;
}

在这个例子中，我们定义了一个div元素，并设置了它的背景颜色为#ea6153。当鼠标移入时，我们使用:hover伪类选择器来改变它的背景颜色为#2c3e50。在我们的CSS代码中，我们使用transition属性来定义过渡效果，包括更改持续时间和变化速度。

/* 鼠标移入时增加阴影效果 */img {
    box-shadow: 2px 2px 2px #ccc;
    transition: box-shadow 0.5s ease;
}
img:hover {
    box-shadow: 5px 5px 5px #ccc;
}

在这个例子中，我们定义了一个img元素，并设置了一个2像素大小的阴影。当鼠标移入时，我们使用:hover伪类选择器改变阴影的大小为5像素。同样，我们使用transition属性来创建过渡效果。

/* 鼠标移入时旋转图片 */img {
    transform: rotate(0deg);
    transition: transform 0.5s ease;
}
img:hover {
    transform: rotate(360deg);
}
    

在这个例子中，我们定义了一个img元素，并设置了一个初始角度为0度的旋转效果。当鼠标移入时，我们使用:hover伪类选择器改变旋转角度为360度。和上面的例子一样，我们使用transition属性来创建过渡效果。

以上这些例子只是鼠标过渡效果的一部分，你可以通过使用不同的CSS属性和值来创建更多更有趣的鼠标过渡效果。让我们开始实践吧！

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